1

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

4

1 回答 1

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/

于 2013-08-29T16:10:22.293 回答