当用户使用jQuery滚动浏览时，更改div css

当用户滚过div时，我需要将其css更改为position：fixed。 就像这里所做的一样： http ： //imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/但只有普通的jquery，没有插件。
一旦用户滚动到另一个div，div也必须停止滚动。
例如：

 
//must start scrolling with user when user reaches it. 
// when #this reaches within say, 10px, of #footer it must stop in it's current position, in order to prevent overlap 

我假设我使用.scroll()和.css() ，但我不知道从那里去哪里。

Answer 1

我在你的回答中注意到#this一旦你开始#this突然消失。 我已经调整了你的答案，允许#this坚持#footer并滚动哪个更顺畅。

我的演示使用稍微不同的标记，并且更加冗长，所以跳转到jsFiddle并检查它。

演示： jsfiddle.net/Marcel/e9hyw/

Answer 2

这最终对我有用：

  jQuery(document).ready(function() { var topOfrel = jQuery("#this").offset().top; var topOffooter = jQuery("#footer").offset().top - jQuery(window).height(); var topOffootero = topOffooter ; var boxheight = jQuery(window).height() - 130;//adjusting for position below jQuery(window).scroll(function() { var topOfWindow = jQuery(window).scrollTop(); if (topOfrel < topOfWindow && topOffooter > topOfWindow) { jQuery("#this").css("position", "fixed").css("top", "130px").css("overflow","auto").css("height", boxheight + "px"); } else { jQuery("#this").css("position", "static"); } }); }); 

Answer 3

您引用的页面使用jQuery：

并且还包含其他Javascript，我们没有看到

顺便说一句，你可以在这里查看：

 http://imakewebthings.com/jquery-waypoints/waypoints.js http://imakewebthings.com/jquery-waypoints/shortcuts/sticky-elements/waypoints-sticky.js 

他使用的function可以在那里看到，但我不会说这是一个快速的答案。 根据他的脚本，他在页面加载后附加一个元素的监听器：

如果您有特定的问题请求，但我怀疑很多人会为您解释整个脚本。