JQuery:在页面刷新时获取滚动位置

Question

我有导航栏，当你滚动到它时，它会变得固定。导航栏工作得很好。但是，我还有一个辅助导航栏，在主导航栏下方打开。当滚动到主导航时，辅助导航变得固定。

在我的网站上刷新页面时，刷新前的滚动位置保持不变。如果我将页面刷新到一半，并试图打开我的辅助导航，它是不可见的。我发现固定的位置在刷新后会从辅助导航中删除。但是，如果从滚动位置向上或向下滚动，代码将读取滚动位置，并应用固定位置。

我是一个JQuery新手，所以我不知道我需要什么来解决这个问题。我乐于接受大家的建议。我想我需要在刷新时获得滚动位置。然后，我可以应用逻辑来保持辅助导航上的固定位置不会被移除。

​

$(window).scroll(function() {                  // assign scroll event listener
	
	    var s = $("#primary-nav");
		var pos = s.position();     // get current position
		$(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        //s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
        if (windowpos > pos.top) {
            $('#secondary-nav').css({
	            position: 'fixed',
	            top: '60px',
	            zIndex: '505',
	        });
        } else {
            $('#secondary-nav').css({
	            position: 'static',
	        });
    });

​

Answer 1

我会尝试将所有这些代码放在一个函数中，然后在scroll事件和最初的页面加载时调用该函数。

​

function navScroll(){
    
    var s = $("#primary-nav");
    var pos = s.position();     // get current position
    var windowpos = $(window).scrollTop();
    
    //s.html("Distance from top:" + pos.top + "<br />Scroll position: " + windowpos);
    if (windowpos > pos.top) {
        $('#secondary-nav').css({
            position: 'fixed',
            top: '60px',
            zIndex: '505',
        });
    } else {
        $('#secondary-nav').css({
            position: 'static',
        });
    }
}

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

$(document).ready(function() {
    navScroll();
});

​