2

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

2 回答 2

4

您可以为页脚设置另一个路径点，其偏移量等于#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元素之间所需的间距。

这是一个例子。

于 2012-08-15T23:17:24.590 回答
0

以下是我使用最新版本的 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()
});
于 2016-09-15T06:34:12.047 回答