3

ウィンドウが下にスクロールされたときにメニューを固定するために、次のコードを使用しています。ウィンドウの高さがヘッダー領域全体を下にスクロールするのに十分な場合は問題なく動作しますが、高さがスクロールするのに十分なだけであるという問題が発生します。その場合、点滅し始め、スクロールできません。

これが問題のデモです。数回更新して、下にスクロールしてみてください。問題を再現するために、ボディの高さを 622px に設定しました。

http://jsbin.com/ipEROYO/1

私が試しているコードは次のとおりです。

$(document).ready(function() {
    var stickyNavTop = $('.nav').offset().top;

    var stickyNav = function(){
        var scrollTop = $(window).scrollTop(); 
        if (scrollTop > stickyNavTop) { 
            $('.nav').addClass('sticky');
        } else {
            $('.nav').removeClass('sticky'); 
        }
    };

    stickyNav();

    $(window).scroll(function() {
        stickyNav();
    });
});

CSS:

.sticky {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
}
4

4 に答える 4

0

このレイアウトには CSS のみのソリューションを強くお勧めします。この方法を何と呼べばよいか誰も知らないようです。そのため、私はこれを絶対的なストレッチ テクニックと呼んでいますが、私の経験では、IE6 以下を除くすべての主要なブラウザーを含むモバイル デバイスと PC で美しく機能します。ここでそれについての議論があります。

body, .header, .nav, .mainContent{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

body, .mainContent {
    bottom: 0;
}

.header{
    height: 120px;
}

.nav{
    height: 70px;
    top: 120px;
}

.mainContent{
    top: 190px;
    overflow: auto;
}

この方法で、非常に堅牢で簡潔でよく整理されたレイアウトが得られ、固定されたヘッダー、フッター、およびサイドバーが非常に簡単に続くことがわかります。

于 2013-10-15T17:10:49.973 に答える
0

それを試してください

     $(window).scroll(function () {

            var scroll_top = $(this).scrollTop();
               if (scroll_top > 66) {//height of header
                 $('.nav').addClass('sticky');
              } else {
              $('.nav').removeClass('sticky');
              }
       });
于 2013-10-15T17:03:55.877 に答える