JQuery Waypoint滚动在页脚停止

我正在使用JQuery Waypoint滚动左侧导航。如何在页脚之前停止滚动？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>

来源

2012-08-15 aje

您可以设置其他航点的偏移，其等同于#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就是一个例子。

来源

2012-08-15 23:17:24 Purag

您能否发表评论？谢谢！ – aje 2012-08-15 23:24:52

@aje：现在就开始工作 - 给我一点时间。 – Purag 2012-08-15 23:38:45

@aje：完成，检查出来。 :) – Purag 2012-08-15 23:46:05

下面是我使用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-15 06:34:12

JQuery Waypoint滚动在页脚停止

回答

相关问题