jQuery Waypoint刷新 [英] Jquery Waypoints Refresh

问题描述

我正在使用一个航路点创建一个粘性div的页面，该粘性div向下滚动页面的位置:固定，直到到达其父div的底部为止. im使用的代码按预期工作，直到调用$ .waypoints('refresh')，然后粘性div跳回到页面顶部并失去其固定位置.

I'm working on a page that uses waypoints to create a sticky div that scrolls down the page with position: fixed until it reaches the bottom of its parent div. The code im using works as intended until $.waypoints('refresh') is called then the sticky div jumps back to the top of the page and loses its fixed position.

此处提供代码:

$('#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.

Where #leftCol is the div that scrolls down the page and #content is its parent 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位置的想法都将受到赞赏.

Any ideas on how to maintain the position of #leftCol when $.waypoints('refresh') is called would be much appreciated.

谢谢

推荐答案

不要，不要，永远不要使用fixed位置元素作为航路点.在GitHub上查看以下所有已解决的问题:#64 ，#44 ，#32 ，#26 ，#13 ，#10 ，#4 .

Do not, do not, do not ever use the fixed position element as the waypoint. See all of the following closed issues on GitHub: #64, #44, #32, #26, #24, #13, #10, #4.

这很容易成为关于Waypoint的最容易被误解的事情，并且绝对是我在未能传达Waypoint如何运作良好方面的错.我计划在插件的下一次迭代中使这一点更加清楚.

This is easily the most misunderstood thing about Waypoints, and is absolutely my fault in not communicating how Waypoints works well enough. I plan to make this much clearer in the next iteration of the plugin.

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

For anybody wondering: Waypoints works by looking at an element's page offset. But a fixed position element's page offset is constantly changing as the user scrolls. So whenever refresh is called, be it manually, by adding another waypoint, or by resizing the browser, the location of that waypoint changes to match wherever the user is at in the page scroll at the time. What you want is a normal static position element that doesn't leave the document flow to be the waypoint. In the example I give on the Waypoints project site, the waypoint is a wrapper element that stays in place, while the nav it wraps gains and loses fixed positioning via CSS. It's very easy for somebody that doesn't understand page offsets and CSS to do what the OP has done here, as it looks intuitive. Again this is something that will be addressed more directly in the documentation/examples in the future.

这篇关于jQuery Waypoint刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！