The ghost dom nav element fixed top does not stay in position

Question

I use Bootstrap 3, I have a full-screen carousel with a navigation bar right after. The navigator is fixed on top after the user scrolls completely past the carousel. It works great.

But now, when the BARELY user scrolls down and then scrolls the navigation bar, he does not return to his original place, he remains fixed at the top.

Here are my js for this:

$(function() { var lastfixed = undefined, spacerEl = undefined, fixed = false, ghostElHeight = 0; $(document).on('scroll', function() { console.log('scroll top : ' + $(window).scrollTop()); if ($(window).scrollTop() >= $(".carousel").outerHeight()) { fixed = true; if (fixed === lastfixed) return $(".navbar").addClass("navbar-fixed-top"); ghostElHeight = $(".navbar").outerHeight() if (!!!spacerEl) { spacerEl = $(".navbar").after( '<div class="navspacer" style="height:' + ghostElHeight + 'px">&nbsp;</div>').next(); } } if ($(window).scrollTop() < $(".carousel").height() + ghostElHeight) { fixed = false; if (fixed === lastfixed) return ghostElHeight = 0; $(".navbar").removeClass("navbar-fixed-top"); !!spacerEl && spacerEl.remove(); spacerEl = undefined; } lastfixed = fixed; }); }); 

I also created a fiddle: http://jsfiddle.net/thqx9g9b/2/ , to reproduce the error that you might need to press CLICK on the scroll wheel, scroll DOWN a small bit after the navbar is attached to the top, and then scroll up.

It is strange that I am doing the SAME, but with a fullscreen jumbotron, and the error does not appear.

UPDATE: If I add "padding: 55px" to the .carousel class, the problem will go away. But this will lead to a large border if I use the image in a carousel.

Here is the updated fiddle with the addition: http://jsfiddle.net/thqx9g9b/3/

The reason this works in my version with jumbotron is that the image is set in the parent div, and there is no border caused by filling, I tried to place the registration on different elements inside the carousel, but for this it should be on the parent div, Does anyone have any work for this or am I missing something?

Answer 1

Your algorithm seems to be a bit off at the moment.

Now, if you scroll just a little below $ (". Carousel"). externalHeight ()

-> fixed does not work true, so navbar never loses the navbar-fixed-top class.

You have to change this

 if ($(window).scrollTop() < $(".carousel").height() + ghostElHeight) { 

to

 if ($(window).scrollTop() < $(".carousel").height()) { 

then it works as expected. ghostElHeight course you don't have to bother with ghostElHeight . Just add navspacer to the HTML and switch it with show / hide.

And for another problem: you enter the lastfixed variable, which makes the code complicated. best way without lastfixed :

change your algorithm from

 fixed = true; if (fixed === lastfixed) return 

to

 if (fixed == true) return fixed = true; 

and the same for the false part. it is simpler and more understandable.

Full JS code:

 $(function () { var fixed = false; $(document).on( 'scroll', function(){ if($(window).scrollTop()>=$(".carousel").outerHeight()) { if (fixed == true) return fixed = true; $(".navbar").addClass("navbar-fixed-top"); $(".navspacer").show(); } if($(window).scrollTop()<$(".carousel").height()) { if (fixed == false) return fixed = false; $(".navbar").removeClass("navbar-fixed-top"); $(".navspacer").hide(); } }); }); 

and add navspacer manually after navigation:

 <div style="height:100px; display: none;" class="navspacer">&nbsp;</div> 

Demo