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

问题是 scrip 在加载时读取了我的页眉高度，但是因为我的页眉高度是视口(viewport)的 100%，所以当调整窗口大小时，导航显示要么太晚要么太早。

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

有什么办法可以解决这个问题吗？ 谢谢

Answer 1

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

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

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