0

我正在尝试使网站标题变得粘滞，使徽标 img 变小，并在用户向下滚动页面 100 像素后重新定位导航链接。

这是我目前拥有的：

$(document).ready(function() {

$(window).scroll(function() {
    if ($(document).scrollTop() > 100) {
        $('#header').addClass('sticky');
        $('#logo img').animate({'width':'200px','top':'-10px'});
        $('#header').animate({'height':'70px'});
        $('#menu_btns ul li').animate({'top':'-24px','left':'-90px'});
        $('#store_links').animate({'top':'-20px','left':'0px'});    

    }
    else {
        $('#header').removeClass('sticky');
        $('#logo img').animate({'width':'287px','top':'0px'});
        $('#header').animate({'height':'116px'});
        $('#menu_btns ul li').animate({'top':'0px','left':'0px'});
        $('#store_links').animate({'top':'0px','left':'0px'});

    }
});
});

我遇到的问题是在向下滚动并且所有动画后，在返回后没有执行任何“其他”动画。

4

2 回答 2

0

请尝试在 if 条件中添加“=”。

$(document).scrollTop() >= 100

看看这里小提琴

于 2013-08-27T05:17:00.343 回答
0

搜索 waypoints.js。这是你需要的。使用航路点的一个例子是

var $mainNav = $("header nav");

$mainNav.waypoint(function(direction){

    if(direction==="down"){
        //if the scroll direction is down then fix the nav ul to the top of the screen
        $(this).find('ul').css({position:'fixed', top: 0});
    }else{
        //if the scroll direction is up then position the nav ul back in the document flow
        $(this).find('ul').css({position:'static'});
    }

});

代码感知滚动的方向，然后相应地粘贴和取消粘贴代码。

航点功能强大，允许程序员在用户滚动到页面上的某个点时触发事件。根据上面的代码片段，常见用途是在导航栏到达视口顶部时制作导航栏，或触发动画。

于 2013-08-27T05:22:46.123 回答