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