jquery.prepend克隆錯誤

我試圖在屏幕爲< 480px並且滾動大於80時將項目添加到我的導航欄中。該項目的多個副本正被插入到我的main-nav中。有人能幫助我理解爲什麼會發生這種情況嗎？你可以通過here看到發生了什麼。jquery.prepend克隆錯誤

$(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(); 
});

來源

2013-04-13 Stephen Crane

我試圖重現你的錯誤，但我沒有得到機會，也許我失去了一些東西無論如何，我想你需要添加一個標誌天氣之前或不是因爲你的條件爲真超過了數據已添加一次，當你在滾動

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-13 23:29:24 Sedz

這是有道理的，因爲每當有人滾動時該函數觸發，該元素將繼續添加到它，除非我停下來編程。我試圖使用你介紹的if（！add）部分，但firefox不喜歡它。我一直在我的控制檯中收到這個錯誤（添加沒有定義） –

請務必在document.ready外面聲明它 – Sedz

好的，我不再讓控制檯在每次滾動時都會感到不適，但它似乎並未實際上預先考慮元素。 –

你給的位置：固定在列表中的項目。您需要在容器上設置「固定」選項。例如

$(".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-13 23:41:51

哎呀，我忘了切換回來。在我開始搞亂之前，我已經這麼做了......謝謝！ –

jquery.prepend克隆錯誤

回答

相關問題