Ошибка клонирования jQuery .prepend

Question

Я пытаюсь добавить элемент в свою навигационную панель, когда экран < 480px, а прокрутка> 80. Несколько копий этого элемента вставляются в мой основной навигатор. может кто-то, пожалуйста, помогите мне понять, почему это происходит? Вы можете видеть, что происходит, перейдя here.

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

Answer 1

Я пытался воспроизвести вашу ошибку, но у меня нет шансов, может быть, я что-то Во всяком случае я думаю, вы должны добавить погоду флаг данные были добавлены до или не потому, что ваше условие истинно больше не хватает один раз и в то время как вы прокручиваете

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

Я надеюсь, что это может помочь :)

Answer 2

вы даете позицию: фиксированный по выделенному. Вам необходимо установить «фиксированный» вариант в контейнере. например

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

Надеется, что это помогает!