Nav nach dem Scrollen hinterher

Question

Momentan kann ich das div an die Spitze kleben, nachdem es 600px herunterscrollt, aber ich wollte wissen, ob es einen anderen Weg gibt, dies zu erreichen. Vorzugsweise würde es bleiben, sobald es die Navigationsleiste selbst passiert.

var mn = $(".secondary-nav"); 
    mns = "secondary-nav-scrolled"; 

$(window).scroll(function() { 
    if($(this).scrollTop() > 600) { 
    mn.addClass(mns); 
    } else { 
    mn.removeClass(mns); 
    } 
}); 

HTML

<div id="nav" class="secondary-nav one-full column"> 
    <ul> 
     <li><a data-scroll href="#retail">Retail</a></li> 
     <li><a data-scroll href="#foodservices">Food Services</a></li> 
    </ul> 
    </div> 

CSS

.secondary-nav { 
    z-index: 1000; 
} 

.secondary-nav-scrolled { 
    position: fixed; 
    width: 100%; 
    top: 0; 
} 

Answer 1

Sie können auch diese verwenden:

$(document).scroll(function(event) { 
    var nav = $('#nav').offset().top; 

    if(nav >= 600) { 
     $('#nav').addClass('fixed'); 
    }else { 
     $('#nav').removeClass('fixed'); 
    } 
}); 

Answer 2

Sie müssen nur die Höhe Ihres navbar zu bekommen.

var myScroll; 
var nav2 = $('#nav').height(); 

$(window).on('scroll',function() { 
myScroll = $(document).scrollTop(); 

if(myScroll > nav2 ) { 
$('#nav').addClass('secondary-nav-scrolled'); 
}else { 
$('#nav').removeClass('secondary-nav-scrolled'); 
} 
}); 

Answer 3

Sie können die unten Skript versuchen:

function sticky_relocate() { 
    var window_top = $(window).scrollTop(); 
    var div_top = $('#sticky-anchor').offset().top; 
    if (window_top > div_top) { 
     $('#nav').addClass('stick'); 
     $('#sticky-anchor').height($('#sticky').outerHeight()); 
    } else { 
     $('#nav').removeClass('stick'); 
     $('#sticky-anchor').height(0); 
    } 
} 

$(function() { 
    $(window).scroll(sticky_relocate); 
    sticky_relocate(); 
}); 

Siehe Demo