JQuery Waypoint 滚动停止在页脚答案

【问题标题】：JQuery Waypoint Scroll Stop at FooterJQuery Waypoint 滚动停止在页脚
【发布时间】：2012-08-15 23:14:36
【问题描述】：

我正在使用 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>

【问题讨论】：

标签： jquery jquery-plugins jquery-waypoints

【解决方案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 是一个例子。

【讨论】：

@aje：现在正在努力——给我一点时间。
找到了解决方案：应用问题中的逻辑 - 向下滚动，应用样式，向上滚动，删除它们！我把它放在第二个航路点并找到了成功。

【解决方案2】：

这是我使用最新版本的 Waypoint 实现它的方法，包括在您向上滚动时松开元素。

$('footer').waypoint({
    handler: function(direction) {
        if (direction == 'down') {
            $moduleTop.css({
                position: "absolute",
                top: $nextModule.offset().top - $moduleTop.outerHeight()
            });
        }
        else if (direction == 'up') {
            $moduleTop.css({
                position: '',
                top: ''
            });
        }
    },
    offset: $moduleTop.height()
});

【讨论】：