jQuery appendTo生成重复项

我是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>

让搜索表单只显示一次，我遗漏了什么

谢谢你的帮助。

那句话：

$('<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>')

创建多个元素。不要在滚动条上创建1个元素，而是在实例化应用程序并附加/分离它时创建它：

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

});

---

我建议每次用户从顶部向下滚动时显示/隐藏表单，而不是创建一个新表单。使用这种方法，您可以将所有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/fadeOut形式，而不是show/hide。

将此作为一个注释，因为我觉得这更像是一个有根据的猜测，而不是一个实际的答案。.remove函数无法处理新创建的DOM对象，请尝试更改为$'.searchmenu'.children'.form inline'.remove；相反，这很有效。非常感谢你的帮助。