如何在用戶開始滾動時嚮導航欄添加陰影？

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 
     } 
    } 
}); 

這裏是一個小提琴，讓你開始：

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