滚动过去的标题后出现 DIV 导航答案

【问题标题】：DIV nav appear after scrolling past header滚动过去的标题后出现 DIV 导航
【发布时间】：2013-09-25 16:35:58
【问题描述】：

我正在设计一个网站，在滚动经过标题后会出现一个粘性导航。

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

$(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 之后

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

【问题讨论】：

任何工作示例？ jsFiddle ?

标签： javascript jquery html css

【解决方案1】：

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

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

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

【讨论】：

我试过了，还是同样的问题。也许我做错了什么？将 $(window).load(function(){ 更改为 $(document).ready(function(){
修改答案，再试一次

【解决方案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();
});//]]>

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

【讨论】：