0

画面が < 480px でスクロールが > 80 のときに、ナビゲーション バーにアイテムを追加しようとしています。このアイテムの複数のコピーがメイン ナビゲーションに挿入されています。誰かがなぜそれが起こっているのか理解するのを手伝ってもらえますか? ここに行くと、何が起こっているかがわかります。

$(function () {
    var $window = $(window);
    var $width = $(window).width();

    function windowWidth() {
        if ($width < 480) {
            function top() {
                var $top = $window.scrollTop();
                if ($top < 80) {
                    $(".main-nav").css({
                        'position': '',
                        'width': '99.5%'
                    });
                    $(".thick-line-header").css("display", "");
                } else {
                    var $homeTab = $('<li class="home"><a href="#top" >test</a></li>');
                    $(".main-nav li").css({
                        'position': 'fixed',
                        'width': '100%',
                        'top': '0',
                        'left': '0',
                        'margin-top': '0'
                    });
                    $("#main-nav").prepend($homeTab);
                    $(".thick-line-header").css("display", "none");
                }
            };
            $(window).scroll(top);
        }
    };
    windowWidth();
});
4

2 に答える 2

0

あなたは位置を与えています：リスト項目に固定されています。コンテナに「固定」オプションを設定する必要があります。例えば

$(".main-nav").css({'position': 'fixed', 'width': '100%', 'top':'0', 'left':'0', 'margin-top':'0'});

それ以外の

$(".main-nav li").css({'position': 'fixed', 'width': '100%', 'top':'0', 'left':'0', 'margin-top':'0'});

お役に立てれば！

于 2013-04-13T23:41:51.887 に答える
0

バグを再現しようとしましたが、チャンスがありませんでした。おそらく何かが欠けている可能性があります とにかく、データが以前に追加されたかどうかにかかわらず、フラグを追加する必要があると思います。

var added = false; 
$(function() {
    var $window = $(window);
    var $width = $(window).width();
    function windowWidth() {
        if ( $width< 480 ) {
            function top() {
                var $top = $window.scrollTop();
                if( $top < 80 ) {
                   $(".main-nav").css({
                      'position': '',
                      'width': '99.5%'
                   }); 
                   $(".thick-line-header").css("display",""); 
                }
                else {
                   var $homeTab = $('<li class="home"><a href="#top" >test</a></li>');
                   $(".main-nav li").css({
                      'position': 'fixed',
                      'width': '100%', 
                      'top':'0', 
                      'left':'0', 
                      'margin-top':'0'
                   });
                   if(!added) {
                      $("#main-nav").prepend($homeTab);
                      added = true; 
                   }
                   $(".thick-line-header").css("display","none");    
                }
             };
             $(window).scroll(top);
          }
       };
       windowWidth();
    });

これが役立つことを願っています:)

于 2013-04-13T23:29:24.573 に答える