在滾動條上更改3個div的css屬性javascript

只是想在我嘗試盜取一些代碼之前找出這是否可能。在滾動條上更改3個div的css屬性javascript

我有一個網站建立在twitter引導與固定導航頂部。

在導航中，我有一個帶有.css屬性的圖像，其高度和寬度設置爲155px，導航欄本身的邊距設置爲155px，然後填充180px以補償大的固定導航。隨後是傳送帶（引導程序功能）。

問題是，是否可以通過更改3個div的3個css屬性來調整nav的大小，因爲用戶滾動通過輪播。我希望導航從180px下降到30px，並且一旦用戶滾動滾動鼠標，就會保持固定在頁面的頂部。只是用盡更少的網頁空間。踢球者是我使用響應大小，所以這隻會影響在大於979px寬的設備上觀看的人。任何幫助，將不勝感激。

來源

2013-07-22 user1881482

我認爲這是可能的，但它會更好地展示活頁。你可以在[這個頁面]（http://heera.it/）上看到類似的東西，但是沒有響應，但它很快就會出現。 [也請查看]（http://api.jquery.com/scroll/）。 –

你需要滾動功能

這裏是根據它的演示實現菜單和風格元素類 http://jsfiddle.net/hushme/3T6LT/2/

$(window).scroll(function() { 
var sc = $(window).scrollTop() 
if (sc > 50) { 
    $("#menu").addClass('small') 
} else { 
    $("#menu").removeClass('small') 
}

}）;

來源

2013-07-22 00:19:36 Hushme

這可行，但是可以爲resize事件設置動畫。所以，如果他們向下滾動需要的總像素的50％的調整大小的酒吧只有在其調整大小的50％ – user1881482

我不明白請解釋一下 – Hushme

最好展示一個例子... http://findandform.com – user1881482

嘗試的jQuery .scroll功能

$('.yourSelector').scroll(function(){ 
    //use the css function to change or resize the 3 divs 
}));

你可以擁有jQuery的http://api.jquery.com/scroll/

的完整參考，.css功能http://api.jquery.com/css/

希望它可以幫助..

來源

2013-07-22 00:16:10 HTTP

這也適用，但是有沒有一種方法可以對變換進行動畫處理。請參閱http://findandform.com – user1881482

而不是使用'.css'使用'.animate'參考jquery網站以獲取此功能的完整參考 – HTTP

你可以得到一個想法從這個（我前幾天寫了它作爲an article here）

(function($){ 
    $.fn.stickyMenu = function(options) { 
     var $this = this, 
     defaults = { 
      'left' : 0, 
      'top' : 0, 
      'menu_offset_top' : $this.offset().top 
     }, 
     settings = $.extend({}, defaults, options); 
     $(window).on('scroll.stickyMenu', function(){ 
      if ($(window).scrollTop() > settings.menu_offset_top) 
      { 
       $this.css({ 
        'position': 'fixed', 
        'top':settings.left, 
        'left':settings.top, 
        'zIndex':9999 
       }); 
      } 
      else 
      { 
       $this.css({ 
        'position': 'relative', 
       }); 
      } 
     }); 
     return $this; 
    }; 
})(jQuery);

來源

2013-07-22 00:21:42

這是真正接近我正在談論的。我可以附加一個動畫功能，或者它是一個或另一個。 – user1881482

確定你可以附加一個'animate'功能。這只是基本的想法，你可以擴展它。 –

在滾動條上更改3個div的css屬性javascript

回答

相關問題