如何切换粘性标题？

Question

The code below makes a sticky header which shows up once you've scrolled down 100px. How do I make the sticky header turn off once I get to a lower part of the page? Lets say 800px?

Thanks!

$(window).scroll(function() {
if ($(this).scrollTop() > 100){  
    $('header').addClass("sticky");
  }

  else{
    $('header').removeClass("sticky");
  }
})

Answer 1

Do you mean like this?

$(window).scroll(function() {
    if ($(this).scrollTop() > 100 && $(this).scrollTop() < 800) {  
        $('header').addClass("sticky");
    } else{
        $('header').removeClass("sticky");
    }
})

Answer 2

You could add another condition for when it the page gets to 800px:

$(window).scroll(function() {
    if (($(this).scrollTop() > 100) && ($(this).scrollTop() < 800)){
         $('header').addClass("sticky");
    }
    else{
         $('header').removeClass("sticky");
    }
});

In my example:

• $(this).scrollTop() is the variable representing the top of the view
• The first part of the if statement adds the condition for the 100px addition
• The second part of the if statement adds the condition for the 800px removal

Answer 3

I would suggest only to use css. If the nav is sticky, why not keep it sticky at all times, and then add margin to the main-content-holder to make room for the nav. For example: if the nav is 108px tall on desktop use:

.main-content-holder{
    position:relative;
    display:block;
    margin-top:108px
}

then adjust height and/or position with media queries.