0

クライアントから、一部のテンプレートのサイドバーを貼り付けてほしいというリクエストがありました。ただし、問題は、問題のサイドバーが高すぎてブラウザー ウィンドウに収まらない場合があることです。

私たちが考えているのは、サイドバーが表示可能領域の外に出ると、通常どおりスクロールしますが、下部が表示されるとすぐに停止するというものです。ユーザーが上にスクロールすると、再び開始されます。

これが起こっている例を見つけることができないようです。私のgoogle-fuは失敗しました。

これをどのように実装できるかについて誰にもアイデアがありますか? かなり単純な jQuery を使用できると思いますが、使用するフックを正確に把握するのは困難です。

チュートリアル、例、またはアドバイスをいただければ幸いです。

4

1 に答える 1

0

私は次のようにそれに取り組みます：

サイドバー コンテナの ID が「sidebar」であると仮定します

$(document).ready(function() {
    if($('#sidebar').height() < $(window).height()) {
        $('#sidebar').addClass('sticky');
    }
});

次に、画面の高さほど高くない場合に必要なプロパティを指定して、sticky という名前の css クラスを作成します。

.sticky {
   position:fixed;
   left:0;
   top:0;
}

編集:position:fixed !important;スティッキー クラスが #sidebar に設定した css をオーバーライドしない場合に使用します。

再編集: 申し訳ありませんが、質問を読み直しました。上記から始めて、ウィンドウ スクロール イベントにバインドし、いくつかのテストを実行します。次のようなことを試してください。

$(window).bind("scroll", function(){
    if($('#sidebar').offset().top - $("html").scrollTop() < 0) {
        //the top of the sidebar has scrolled above the top of the viewport
    } else {
        //the top of the sidebar is still below the top of the viewport
    }
});

これがお役に立てば幸いです。

于 2012-07-05T00:46:13.383 に答える