根據頁面滾動更改div位置

下面的代碼將div的位置更改爲固定，一旦元素scrollTop大於數字。我試圖修改這個腳本或者找到一個不同的解決方案，這樣div就會在一定範圍內滾動，並在某個點停止滾動（所以div不會離開頁面或者與頁腳元素重疊）。不知道是否正確的方式是說如果scrollTop大於150，那麼position = fixed，如果它大於600，則位置回到絕對值，或者如果有更好的方法，比如距離底部的距離。。根據頁面滾動更改div位置

我用MooTools的，不是jQuery的。我知道有幾個選項的jQuery /插件，做到這一點。在此先感謝！

window.onscroll = function() 
{ 
    if(window.XMLHttpRequest) { // IE 6 doesnt implement position fixed nicely...  
     if (document.documentElement.scrollTop > 150) { 
      $('tabber').style.position = 'fixed'; 
      $('tabber').style.top = '0'; 

     } else { 

      $('tabber').style.position = 'absolute'; 
      $('tabber').style.top = 'auto'; 


     } 
    } 
}

來源

2011-04-20 marcodeluca

爲什麼你不將div的位置設置爲固定值，並且屬性會保留並且在需要時保留頂部？ – 2011-04-20 12:13:12

他正在這樣做，因爲ie6無法修復。 – 2011-04-20 12:31:17

Yah，我也在尋找這樣的效果：當瀏覽器滾動頁面時，頁面中途的div是靜止的，直到div碰到窗口的頂部，然後它在窗口的頂部保持可見而不是從頂部滾動。 – marcodeluca 2011-04-20 12:35:56

上面的腳本在很多層面上都是錯誤的。

不使用window.onscroll而是window.addEvent("scroll", function() {});

緩存選擇器。當元素不改變時，在每個滾動上使用$("tabber")是昂貴的。

只是做var tabber = $("tabber")並參考。

你不需要做

$("tabber").style.position = ... 
$("tabber").style.top = ...

做：

tabber.setStyles({ 
    position: "fixed", 
    top: 12123, 
    right: 24 
});

這有mootools的插件，例如scrollSpy由大衛·沃爾什：http://davidwalsh.name/mootools-scrollspy

它可以讓你在到達各種滾動目標或事件時設置腳本事件，查看示例。

，或者你可能只是你自己，比如寫吧，這花了我15分鐘的事： http://jsfiddle.net/dimitar/u9J2X/（看http://jsfiddle.net/dimitar/u9J2X/show/） - 當它達到20像素頁腳它停止固定。如果再次滾動，則返回到固定狀態。

來源

2011-04-20 13:39:16

感謝Dimitar，我將檢查你的演示，我已經使用Scrollspy根據位置顯示和隱藏了一些div，我也會嘗試一些。 – marcodeluca 2011-04-21 11:29:28

根據頁面滾動更改div位置

回答

相關問題