如何添加滚动导航效果

时间:2013-09-03 11:52:02

标签: html css html5 css3 navigation

这个网站(http://www.madebyjoyce.com/)有一个非常漂亮的导航,只有在我们向下滚动到某个点后才能启用它。我想知道我是否可以获得如何添加此效果的教程。

谢谢

1 个答案:

答案 0 :(得分:1)

也许这让你心情愉快:

这几乎就是交易,其余的你可以用css做,

var scrollTop,viewportHeight;
$(window).scroll(function(e){
     scrollTop = $(window).scrollTop();
     viewportHeight = $(window).height();
    $('div:not(.visible)').each(function(){
        var top = $(this).offset().top;
        var bottom = top + $(this).height();
        if(top <= scrollTop && bottom >= (scrollTop + viewportHeight) ){
            $(this).addClass('visible');

        }else{
            console.log(scrollTop,top);
        }
    });
});

http://jsfiddle.net/ErBRf/8/