JQuery Waypoint 滚动停止在页脚

Question

我正在使用 JQuery Waypoint 滚动左侧导航。如何在页脚之前停止滚动？

<script type="text/javascript">
var $jq = jQuery.noConflict();

$jq(document).ready(function() {

$jq('.top').addClass('hidden');
 $jq.waypoints.settings.scrollThrottle = 30;


$jq("#toc").waypoint(function(event, direction) {
    $jq('.top').toggleClass('hidden', direction === "up");

    if (direction === 'down') {
        var cssObj = {'position' : 'fixed', 'top' : '3px', 'left' : '100px'}
    }
    else {
        var cssObj = {'position' : 'absolute', 'top' : '3px', 'left' : '100px'}
    }
    $jq('#toc').css(cssObj);
},{
    offset: '3'
});



 });
 </script>

Answer 1

您可以为页脚设置另一个路径点，其偏移量等于#toc 元素的高度加上任何内边距、边框和定位添加内容。

所以也许是这样的:

var toc = $("#toc");
$("footer").waypoint(function(event,direction){
    toc.css({
        position: "absolute",
        bottom: "403px"
    });
},{
    offset: toc.height() + 6
});

这样，一旦检测到页脚顶部和页面顶部之间的空间量等于#toc元素的总高度，就会返回到 position:absolute 和 bottom 值为 403px。调整此值以匹配页脚的高度，并适应页脚和 #toc 元素之间所需的间距。

Here就是一个例子。