将导航杆滚动到顶部

Question

My problem is along the lines of these previous issues on StackOverflow but with a slight difference.

Previous issues: Stopping fixed position scrolling at a certain point? Sticky subnav when scrolling past, breaks on resize

I have a sub nav that starts at a certain position in the page. When the page is scrolled the sub nav needs to stop 127px from the top. Most of the solutions I have found need you to specify the 'y' position of the sub nav first. The problem with this is that my sub nav will be starting from different positions on different pages.

This is the JS code i'm currently using. This works fine for one page but not all. Plus on mobile the values would be different again.

 var num = 660; //number of pixels before modifying styles

 $(window).bind('scroll', function () {
     if ($(window).scrollTop() > num) {
         $('.menu').addClass('fixed');
     } else {
         $('.menu').removeClass('fixed');
     }
 });

I'm looking for a solution that stops the sub nav 127px from the top no matter where on the page it started from.

Answer 1

You can use position: sticky and set the top of the sub-nav to 127px .

See example below:

 body { margin: 0; } .main-nav { width: 100%; height: 100px; background-color: lime; position: sticky; top: 0; } .sub-nav { position: sticky; width: 100%; height: 50px; background-color: red; top: 100px; } .contents { width: 100%; height: 100vh; background-color: black; color: white; } .contents p { margin: 0; } 

 <nav class="main-nav">Main-nav</nav> <div class="contents"> <p>Contents</p> </div> <nav class="sub-nav">Sub-nav</nav> <div class="contents"> <p>More contents</p> </div> 

Please see browser support for sticky here

Answer 2

You should change your code to the below, should work fine:

 $(window).bind('scroll', function () {
     if ($(window).scrollTop() > $(".menu").offset().top) {
         $('.menu').addClass('fixed');
     } else {
         $('.menu').removeClass('fixed');
     }
 });

Answer 3

Maybe you can try this:

• Find navigation div ( .menu )
• Find the top value of the .menu (vanilla JS would be menuVar.getBoundingClientRect().top , not sure how jQuery does this).
• Get top value of browserscreen.
• Calculate the difference - 127px.
• When the user scrolls and reaches the top value of the menu -127px -> addClass('fixed') .