1

この jQuery waypoints pluginを使用して、サイドバーをフロートさせています。すべてが正常に機能していますが、サイドバーが上にスクロールしないようにフッターに追加のウェイポイントを設定する必要があり、残念ながらjQueryのコーディング方法がわかりません。

簡単な jsfiddle をセットアップしましたが、jsfiddle を使用するのはこれが初めてだったので、ご容赦ください。

これを達成する方法にこだわっているので、どんな助けも大歓迎です。

私が使用している現在のjQueryコードは次のとおりです。

<script>
    $(document).ready(function() {
        $('.sidebar').waypoint('sticky', {
             offset: 264 // Apply "stuck" class when element 264px from top
        });;
    });
</script>
4

1 に答える 1

2

これにはプラグインを使用する必要はありません。これは自分で簡単に行うことができます。変数を調整するだけです。

更新:ここでは jsFiddle が動作しています。

$(window).scroll(function() {
   var scrollVal = $(this).scrollTop();
    if ( scrollVal >= 0 && scrollVal < 260 ) {
       //between 0 and navigation

        $('.sidebar').removeClass('stuck').css({'margin-top':'0px'});;
        $('.content').css({'margin-left':'0px'});
    }else if ( scrollVal > 260 && scrollVal < 800 ) {
       //between navigation and footer

        $('.sidebar').addClass('stuck').css({'margin-top':'0px'});;
        $('.content').css({'margin-left':'100px'});
    }else if ( scrollVal > 800 ) {
        //beyond footer

        $('.sidebar').removeClass('stuck').css({'margin-top':'540px'});
        $('.content').css({'margin-left':'0px'});
    }
});
于 2013-01-31T19:27:52.707 に答える