Fixed div scroll stop after - javascript

I am working on a menu, that is fixed to the right side of the page. I am using some JavaScript that keeps the menu in it's fixed position until the site reaches a specific spot (243px from the top - which clears my header). All of this is working as I intended...but I'm looking for a way for the menu to stop scrolling at a specific number of pixels from the bottom (To clear my footer - 600px).
The JavaScript looks like:
$(window).scroll(function(){
$("#side").css("top",Math.max(15,243-$(this).scrollTop()));
});
The HTML looks like:
<div class="menu">
<div id="side">
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</div>
</div>
The CSS looks like:
.menu {
right: 0;
position: absolute;
top: 243px;
width: 250px;
z-index: 5;
}
#side {
background: #ace;
position:fixed;
width: 250px;
}
JS Fiddle: https://jsfiddle.net/050dqcea/
Original solution (scrolling from top): Stopping fixed position scrolling at a certain point?

I think I understand now, the fiddle didn't have jQuery loaded so it just wasn't running as intended.
You can change how you want this to show or hide, that's up to you. I'd make a bit of a comment about how irritated your users might be that the menu disappears but that is up to you to decide. Alternatively you can use these triggers to "refix" your menu. The world is your oyster, etc.
I've used $("#side").offset().top here. The idea is to check when the menu's bottom has scrolled to the top of the footer. Then to bring it back we check if the vertical scroll is less than the offset of the top of the footer.
A fiddle for you: https://jsfiddle.net/5p90s06n/1/

Related

Bootstrap navigation affix bug - menu becomes jittery, jumpy on long pages

I'm building a website using bootstrap affix to manage the main menu. It seems to work perfectly on fairly short pages but I find that as page length increases the menu starts to get jumpy, jittery, as you scroll so I created 3 sample pages to illustrate the problem. Other than some extra content to promote additional scrolling the implementation of affix is identical.
Typically when I scroll I use the navigator scrollbar - the behavior appears more pronounced using the scrollbar vs keyboard up/down arrows and perhaps more so on Linux Firefox vs Chrome.
The affix CSS settings:
.affix {
top: 0;
width: 100%;
z-index: 9999 !important;
}
.affix + .affix-content-container
{
position: relative;
top: 50px;
}
.navbar {
margin-bottom: 0px;
}
I use the class, affix-content-container, on the div to contain all the body content following the bootstrap nav. Here are the links to the 3 varying length demo pages:
affix short page
affix medium page
affix long page
I've looked at some other websites which use something like affix, much longer pages, and they seem to behave more smoothly. Any suggestion how to smooth this out?
Here is a link to a video from Firefox. With each page I first use the mouse and scrollbar, then just the arrow keys. The green horizontal line is there for perspective, helps illustrate the problem.
Affix Video Demo
Workaround Solution Update: 2018-01-23
I added CSS transitions to .affix, in-out, etc, but they have no effect. It is still jumpy. So I thought back to the goal which is a navbar that scrolls to the top and smoothly fixes to the top of the page. I'm not much good with javascript, but I found some code and modified it:
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 120) {
$('nav').addClass('fix-navbar-position');
} else {
$('nav').removeClass('fix-navbar-position');
}
});
</script>
I set the height of the header to 120, the scroll then fix height:
header { height: 120px; }
I found that if I set it up as: that I was seeing some odd margins or extra vertical padding, so I separated it so that nav would be an outer container only - and this worked:
<nav>
<div class="navbar navbar-default navbar-inverse">
The problem seemed to have something to do with the .navbar styling. To see the workaround solution visit: javascript-scroll-fix

Changing the distance an internal link scrolls down the page

Hi I've got a nav menu that changes to fixed once scrolled down the page a certain amount of pixels.
Because the menu is fixed, it overlays the top cutting out the header of that section.
I'm looking to affect how far the page moves when using the menu to move to a section on the page, so sort of negatively offset how far the page scrolls down to show all the menu aswell as section header if possible.
Thanks!
I've come across this issue and came up with the following solution:
<nav class="fixed">
About
...
</nav>
...
<div id="about" class="anchor-helper"></div>
<div class="container-i-actually-want-to-see>
<!-- your content goes here -->
</div>
In the CSS:
nav {
height: 50px;
}
.anchor-helper {
position: relative;
top: -50px; /* however tall your nav is, you want this to be negative that amount */
}
What I like about this solution is that it relies on CSS as much as possible and only uses javascript for smooth scrolling. If someone navigates to http://your-site.com/example-page#about, they will get to where you want them to be.

How to stick a div to the footer?

I have a menu in div.wrapper, I want the div.wrapper to stick to the footer
<div class="wrapper">
<div id="menu">
<ul>
<li>1.</li>
<li>2.</li>
<li>3.</li>
</ul>
</div>
<div class="push"></div>
</div>
<div class="footer">
<div id="footer-menu"></div>
</div>
How I can do that? My code jsfiddle . I cant move this menu from .wrapper to .footer. If I move scroll on page I want to have this menu stick with my footer.
Check this updated fiddle. I think this way you can achieve it. You don't need any JavaScript/ JQuery code to do it only CSS should be sufficient.
Changes in CSS classes :
.footer {
position : fixed;
bottom : 0;
height: 155px;
background-color : red;
width : 100%;
}
#menu{
position : fixed;
bottom : 60px;
z-index : 1;
}
position:fixed will take care of window scroll. Take a look at bottom property added to both the classes. For footer it is 0 where as for menu it is 60px. You can change bottom value in menu to position it the way you want.z-index will bring it above the footer.
Also, you should use footer tag rather than a div with class footer.
Use like this:
$('#menu').appendTo('.footer').css('position','fixed');
If you just want to move use this:
$('#menu').appendTo('.footer');
And if you want when you scroll use something like this:
$(window).on('scroll',function(){
//code in when to move
var t = $(window).scrollTop();
if(t>300)
$('#menu').appendTo('.footer');
});
demo
demo with scroll

CSS/JS content scroll UP instead of down

I'm building a site with the navigation bar stretching across the entire site and it's fixed.
Under the navigation bar there is an image, a background image, which is set as a cover. And under the image is the main content.
When you scroll down, the navigation bar covers the image from top to bottom and the main content is now visible, effectively scrolling in a downwards fashion. I would like to "reverse" it. So the navigation is still fixed with the cover image under it but this time, when you scroll down the main content comes up and covers the image from bottom to top. So when you scroll down, the main content scrolls up.
Let's say my image has a 1 at the top and a 2 at the bottom. So, normally when you scroll down the navigation bar covers the image from top to bottom the 1 will disappear and the 2 will be visible until that is also covered. The effect I'm looking for would make the 2 disappear and the 1 would remain in the same place until it is covered by the main content.
I looked into parallax but I'm not sure if that's the right thing to go with. And I have no idea how to do achieve this effect.
Hopefully you'll understand what I'm trying to do here. If you need any more info then just let me know.
Thanks in advance.
EDIT
The effect can be seen on the abduzeedo frontpage
You need the image to be "attached" to the background ?
If so, cannot you just fix it to the background ?
body {
background-attachment:fixed;
}
Source: http://www.w3schools.com/cssref/pr_background-attachment.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment
Note: Be careful using W3Schools, their information is often incorrect, see here.
Here's an example with an img element.
Demo
code view
The basic HTML layout:
<nav></nav>
<img src="/image.ext" class="scrollup" />
<div class="main"></div>
Your nav will be positioned fixed, as you said. The image also needs fixed positioning. We set its z-index to -1 to make sure it's covered up.
img {
position: fixed;
width: 100%;
z-index: -1;
top: 20px; left: 0;
}
The main element is positioned relatively. Because our nav and image both have fixed positioning, the top value is relative to the top of the viewport. 100% means that .main starts as soon as we start scrolling.
.main {
background: white;
position: relative;
top: 100%;
}

Mousewheel navigation through page blocks

For instance I have a page of 5 blocks:
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
Each block is 100% width and height of a window, the red one(1) is visible.
.div1, .div2, .div3, .div4, .div5 {
width: 100%;
height: 100%;
}
I want to navigate throgh those blocks using mouse wheel. When i scroll down the second block animates from bottom, a little more down the third one animates. And I don't want scroll bar to be visible.
I know I should use jquery mousewheel plugin and choose an action depends on delta. But don't see the whole situation.
I hope my question is clear. Would appreciate any help and websites who already implemented such kind of naviation to dig in it.
You should be using jquery scroll event as shown here
$('#target').scroll(function() {
//code goes here
})
also you can hide scrollbar as shown here
or you can try infinite scroll plugins.
First of all, each of your blocks should have "position: fixed". The first block would have top: 0px; bottom 0px; left 0px; right 0px; While for the block below that, left and right are still 0, but top and bottom are now offset by the height of your window (you can get the height of your window with $(window).innerHeight(); And so on and so forth with the other blocks.
Then whenever the user is scrolling (using the scroll events already given in other answers) you simply modify the top and bottom (equally) of all your blocks by however much you want each time the event fires.
Cheers

Categories

Resources