javascript - 滚动过去的标题后出现 DIV 导航

Question

我正在设计一个带有粘性导航的网站，在滚动过去标题后出现。

我使用这个脚本让它工作：

$(window).load(function(){
// Get the headers position from the top of the page, plus its own height
var startY = $('#header').position().top + $('#header').outerHeight();

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

function checkY(){
    if( $(window).scrollTop() > startY ){
        $('#navbar').slideDown();
    }else{
        $('#navbar').slideUp();
    }
}

 // Do this on load just in case the user starts half way down the page
 checkY();
 });//]]>  

问题是脚本在加载时读取我的标题的高度，但由于我的标题高度是视口的 100%，当调整窗口大小时，导航出现得太晚或太早。

例如加载具有 670 像素高视口的页面，缩小到 400 像素视口。我的标题缩小到 400px 高，即使 te nav 只出现在 670px 之后

有任何解决这个问题的方法吗？谢谢

Answer 1

将您的 javascript 函数触发器放在 document.ready() 而不是 window.load() 中？

尝试将这部分移出 window.load()。

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

Answer 2

尝试这个：

$(window).on("load resize",function(e){
    // Get the headers position from the top of the page, plus its own height
    var startY = $('#header').position().top + $('#header').outerHeight();

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

    function checkY(){
        if( $(window).scrollTop() > startY ){
            $('#navbar').slideDown();
        }else{
            $('#navbar').slideUp();
        }
    }

    // Do this on load just in case the user starts half way down the page
    checkY();
});//]]>

只有第一行（在加载调整大小时）被修改。