滚动过标题后会出现DIV导航

时间:2013-09-25 16:35:59

标签: javascript jquery html css

我正在设计一个滚动浏览标题后出现粘性导航的网站。

我使用此脚本开始工作:

$(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%,所以当一个窗口调整大小时,导航会显得太晚或太早。

例如,使用670px高视口加载页面,大小缩小到400px视口。尽管te导航仅在670px之后出现

,但我的标题会缩小到400px高

任何解决方法? 感谢

2 个答案:

答案 0 :(得分:0)

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

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

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

答案 1 :(得分:0)

试试这个:

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

它只是修改后的第一行(加载大小调整)。