Sticking Nav После прокрутки Прошлое

Question

Прямо сейчас, я могу вставить div в верхнюю часть после того, как он прокручивает вниз 600 пикселей, но я хотел знать, есть ли другой способ достичь этого. Предпочтительно, он будет придерживаться, когда он пройдет сам навигатор.

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

Вы также можете использовать этот:

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

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

Answer 2

вам просто нужно, чтобы получить высоту панели навигации.

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

Вы можете попробовать ниже скрипт:

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(); 
}); 

Demo Посмотреть