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

那一行：

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

});

Answer 2

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

jQuery appendTo制作重复的项目

2 个答案: