使用簡單的jquery腳本讓div跟着滾動頁面

我試圖在這裏使用這個腳本：http://css-tricks.com/scrollfollow-sidebar/在用戶滾動時創建一個簡單的div，跟隨窗口。我將其從0更改爲topPadding，並將topPadding更改爲topPadding * 2以獲得正確的頂部偏移量。使用簡單的jquery腳本讓div跟着滾動頁面

不幸的是，這有副作用，使頁面更長一點，並允許用戶無限滾動。如果你使窗口足夠小，這個錯誤實際上也是在原始代碼中沒有我更大的toppadding變化。

我也嘗試了另一個jQuery插件，但它並沒有工作，這給了我我需要的，所以我該如何解決它？

來源

2010-02-12 V_H

您改變了什麼從0到topPadding？它在這裏似乎很好。 – Marius 2010-02-14 07:01:28

我把這個快速的修正，基於文檔高度限制在一起。我不確定jQuery是否給出了準確的高度，因此是100px的安全障礙。即使高度不是很好，任何額外的滾動都將受到限制，當然不會是無限的。

<script type="text/javascript"> 
    var documentHeight = 0; 
    var topPadding = 15; 
    $(function() { 
     var offset = $("#sidebar").offset(); 
     documentHeight = $(document).height(); 
     $(window).scroll(function() { 
      var sideBarHeight = $("#sidebar").height(); 
      if ($(window).scrollTop() > offset.top) { 
       var newPosition = ($(window).scrollTop() - offset.top) + topPadding; 
       var maxPosition = documentHeight - (sideBarHeight + 100); 
       if (newPosition > maxPosition) { 
        newPosition = maxPosition; 
       } 
       $("#sidebar").stop().animate({ 
        marginTop: newPosition 
       }); 
      } else { 
       $("#sidebar").stop().animate({ 
        marginTop: 0 
       }); 
      }; 
     }); 
    }); 
</script>

來源

2010-02-16 15:46:18 Fenton

我可以在瀏覽器中複製你的bug（Firefox 3.5）。

問題是，代碼不會查看側欄的底部是否脫離文檔的末尾。

你最好打賭是用.height()方法檢查。您可以獲得邊欄的高度（如示例中所示）爲$("#sidebar").height()，整個文檔的高度爲$(document).height()。

究竟應該是什麼行爲 - 取決於你。它包含一個額外的if，以確保所有像素正確排列，但設計問題（如邊欄應該如何與底部對齊）將成爲個人品味的問題。

來源

2010-02-14 10:55:07 JXG

爲什麼不只是使用CSS。

#theNonMovingDiv {position:absolute; position: fixed; top: Npx; right:Mpx}

position：fixed;在ie6中不起作用，但包括位置：絕對;會給你一個粗略的近似值。

來源

2010-02-16 00:35:55 wheresrhys

使用簡單的jquery腳本讓div跟着滾動頁面

回答

相關問題