Jquery Waypoints刷新

我正在使用路标创建一个粘性div的页面，该div向下滚动页面的位置：固定直到它到达其父div的底部。 代码即时使用按预期工作，直到$ .waypoints（’refresh’）被调用，然后粘性div跳回到页面顶部并失去其固定位置。

inheritance人代码：

$('#content').waypoint(function(event, direction){ if (direction === 'down') { $(this).removeClass('sticky').addClass('bottomed'); } else { $(this).removeClass('bottomed').addClass('sticky'); } }, { offset: function() { return $('#leftCol').outerHeight() - $('#content').outerHeight(); } }).find('#leftCol').waypoint(function(event, direction) { $(this).parent().toggleClass('sticky', direction === "down"); event.stopPropagation(); }); 

其中#leftCol是向下滚动页面的div，而#content是其父div。

我有的CSS是：

 #content { width: 975px; height: auto; position: relative; margin-top: 10px; margin-bottom: 20px; min-height: 800px; } #leftCol { position: absolute; width: 974px; } .sticky #leftCol { position:fixed !important; top:0 !important; left: 50% !important; width: 974px !important; margin-left: -488px; } .bottomed #leftCol { position: absolute !important; bottom: 0px; } 

关于如何在调用$ .waypoints（’refresh’）时保持#leftCol位置的任何想法都将非常感激。

谢谢

Answer 1

不要，不要，不要使用fixed位置元素作为航点。 请参阅GitHub上的以下所有已关闭问题： ＃64 ， ＃44 ， ＃32 ， ＃26 ， ＃24 ， ＃13 ， ＃10 ， ＃4 。

这很容易成为关于Waypoints的最容易被误解的事情，并且绝对不能告知Waypoints如何运作得很好。 我打算在插件的下一次迭代中更加清楚。

对于任何想知道的人：Waypoints通过查看元素的页面偏移量来工作。 但是，当用户滚动时，固定位置元素的页面偏移量会不断变化。 因此，每当调用刷新时，无论是手动，通过添加另一个航点，还是通过调整浏览器的大小，该航点的位置都会发生变化，以匹配用户当时在页面滚动中所处的位置。 你想要的是一个普通的静态位置元素，它不会使文档流成为航点。 在Waypoints项目网站上给出的示例中，航点是一个保留在原位的包装元素，而nav包裹增益并通过CSS丢失固定位置。 对于那些不了解页面偏移和CSS的人来说，这很容易做OP在这里所做的事情，因为它看起来很直观。 同样，这将在未来的文档/示例中更直接地解决。