jQuery appendTo가 중복 된 아이템을 만듭니다

Question

저는 jQuery를 처음 접해 왔기 때문에 제가 원했던 대부분을 이해할 수 있었지만 문제가있었습니다.

사용자가 아래로 스크롤하면 메뉴 모음도 함께 이동합니다. 그러나 검색 폼은 여러 번 나타납니다. 사용자가 여러 번 위아래로 스크롤하면 많은 검색 양식이 전체 페이지를 채 웁니다. 내가 탐색 양식을 만드는 실종 무엇

<script> 
$(document).ready(function() { 

var menu = $('.yamm'); 
var origOffsetY = menu.offset().top; 

function scroll() { 
    if ($(window).scrollTop() >= origOffsetY) { 
     $('.yamm').addClass('sticky'); 
     $('.content').addClass('menu-padding'); 
     $('<form class="form-inline"><input type="text" class="form-control" placeholder="Search over 80,000 products" style="width: 80%;"><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button></form>').appendTo('.searchmenu'); 
    } else { 
     $('.yamm').removeClass('sticky'); 
     $('.content').removeClass('menu-padding'); 
     $('.searchmenu .form-inline').remove(); 
    } 

} 

document.onscroll = scroll; 

});</script> 

한 번만 나타납니다

이 내 스크립트가 지금처럼 보이는 무엇인가?

도움 주셔서 감사합니다.

Answer 1

/사용자가 스크롤 새 매번 생성하는 양식을 대신 숨기기 아래에서 위로. 이 방법을 사용하면 모든 HTML을 동일한 파일에 보관할 수 있습니다.

HTML 파일 :

<form id="search-form" class="form-inline"><input type="text" class="form-control" placeholder="Search over 80,000 products" style="width: 80%;"><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button></form> 

스크립트 :

<script> 
    $(document).ready(function() { 

     var menu = $('.yamm'); 
     var origOffsetY = menu.offset().top; 
     var searchForm = $('#search-form'); 

     function scroll() { 
      if ($(window).scrollTop() >= origOffsetY) { 
       $('.yamm').addClass('sticky'); 
       $('.content').addClass('menu-padding'); 
       searchForm.show(); 
      } else { 
       $('.yamm').removeClass('sticky'); 
       $('.content').removeClass('menu-padding'); 
       searchForm.hide(); 
      } 

     } 
     // Hide the form on load, or you can just set a display:none with CSS 
     scroll(); 

     document.onscroll = scroll; 
    }); 
</script> 

또한 형태 fadeIn/페이드 아웃을 할 수 있습니다, 대신 표시/숨기기.

Answer 2

그 라인 :

$('<form class="form-inline"><input type="text" class="form-control" placeholder="Search over 80,000 products" style="width: 80%;"><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button></form>') 

여러 요소를 생성한다. 대신 스크롤에 한 요소를 만드는, 응용 프로그램을 인스턴스화하는 경우를 작성하여 추가/그것을 분리 :

내가 보여 추천

$(document).ready(function() { 

var menu = $('.yamm'); 
var origOffsetY = menu.offset().top; 
//Create it: 
var $searchForm = $('<form class="form-inline"><input type="text" class="form-control" placeholder="Search over 80,000 products" style="width: 80%;"><button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search"></span></button></form>'); 

function scroll() { 
    if ($(window).scrollTop() >= origOffsetY) { 
     $('.yamm').addClass('sticky'); 
     $('.content').addClass('menu-padding'); 
     //Use it: 
     $searchForm.appendTo('.searchmenu'); 
    } else { 
     $('.yamm').removeClass('sticky'); 
     $('.content').removeClass('menu-padding'); 
     //Remove it: 
     $searchForm.detach(); 
    } 

} 

document.onscroll = scroll; 

});