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元素的总高度，它就会返回{{1 } position:absolute值为bottom。调整此值以匹配页脚的高度，并适应页脚和403px元素之间所需的间距。

Here就是一个例子。

Answer 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()
});

页脚上的JQuery Waypoint Scroll Stop

2 个答案: