如何實現這樣一個滾動div與改變CSS？

這個site在左邊有一個滾動div。當你滾動頁面時，div也有節奏地滾動，圖像的顏色也會改變。 position:fixed並不是所有可以做到的。如何實現這樣一個滾動div與改變CSS？

然後是什麼技術？

編輯：

position:fixed是一切，我可以用它來得到一個div固定在與頁面滾動的位置。但如何增加更改div的節奏？我還需要展示哪些研究成果（負面排名）？

來源

2012-07-30 Istiaque Ahmed

你嘗試尋找的源代碼？ http://www.builtbymoby.com/scripts/home.js – j08691 2012-07-30 19:24:24

是的，我做到了。已經是一個負面的觀點...任何幫助理解代碼？或者其他簡單的方法？ – 2012-07-30 19:34:16

我猜你是因爲代碼就在那裏，並且很容易遵循而被人詬病。 – j08691 2012-07-30 19:37:04

你可以通過使用jquery實現這一點。

var divs = $('.fademe'); 
$(window).on('scroll', function() { 
    var st = $(this).scrollTop(); 
    if (st > 50 && st < 100) { 
     $('.fademe').css({ 
      'color': '#fff' 
     }); 
    } 
    else { 
     $('.fademe').css({ 
      'color': '#000' 
     }); 
    }  
});

該功能將改變文本的顏色在一個div當滾動條的位置是50和100之間，否則文本將是黑色

可以修改上述jQuery代碼來改變任何你想要的CSS。

自己嘗試一下這裏http://jsfiddle.net/J8XaX/29/

加入反彈與這一個http://jsfiddle.net/J8XaX/43/

希望這有助於

來源

2012-07-30 19:35:52

關於div移動的節奏是什麼？ – 2012-07-30 19:45:28

這是一個CSS屬性，我猜測。而不是使用position：fixed你可以使用上面相同的jquery來修改css'top'屬性。 – 2012-07-30 19:47:23

如果我添加頂級屬性，會添加反彈效果嗎？ – 2012-07-30 19:48:39

如何實現這樣一個滾動div與改變CSS？

回答

相關問題