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克隆错误

回答

相关问题