使用简单的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跟着滚动页面

回答

相关问题