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:absolutebottom403px#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 に答える