如何在用户开始滚动时向导航栏添加投影?

时间:2013-08-29 15:58:51

标签: jquery css

您认为使用CSS3可以实现这种效果吗?我正在尝试为我的导航栏实现这样的功能。 http://garypeppergirl.com/您可以看到当用户向下滚动时导航的样式会发生变化?使用示例网站,高度发生变化......我希望我有一个阴影D:如果CSS3无法做到这一点......你们知道如何使用Javascript或Jquery实现它吗?有人请帮帮我。谢谢!

1 个答案:

答案 0 :(得分:4)

您可以使用jQuery的scrollTop()方法来确定滚动距离:

var distance  = $(window).scrollTop();

然后,您可以将其与.scroll()事件结合使用,并将类添加到导航中。然后,您可以使用box-shadow属性设置新类的样式:

var nav = $('#nav'); // Change to nav div
var nav_class = 'mini-nav'; // Change to class name
var threshold = 100; // Change to pixels scrolled

$(window).scroll(function () {
    var distance = $(this).scrollTop();
    if (distance > threshold) { // If scrolled past threshold
        nav.addClass(nav_class); // Add class to nav
    } else { // If user scrolls back to top
        if (nav.hasClass(nav_class)) { // And if class has been added
            nav.removeClass(nav_class); // Remove it
        }
    }
});

这是一个让你入门的小提琴:

http://jsfiddle.net/X967T/5/