jquery - 当用户开始滚动时，如何向导航栏添加阴影？

Question

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

Answer 1

您可以使用 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
        }
    }
});

这是一个帮助您入门的 fiddle :

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