Question

我有一个滚动功能，可以修复div并附加，但它非常跳跃和闪烁。这是我的JSFiddle - https://jsfiddle.net/h3thnabh/

这是我的功能;

    <script>

        var test = true;
        $(window).scroll(function () {

        if ($(window).scrollTop() > 200 && test==true) {

        $('.main-menu-top').addClass("sticky");
        } else {
        $('.main-menu-top').removeClass("sticky");
        }
    })

    </script>    
    <script>

        var test = true;

        $( document ).scroll(function() {

        if($('.main-menu-top').hasClass('sticky') && test==true){
            test = false;
            $('.main-menu-top').append('<div id="checkout_sticky"></div>');
        }else{
            test = true;
            $('#checkout_sticky').remove();
        }
        })

    </script>

如何阻止这种情况发生？

Answer 1

在滚动期间，您的.scroll()事件处理程序可能会被调用数百次，并且似乎正在使用某种导致交替行为的标记。根据您对所需内容的描述，这似乎不是正确的代码。此外，我没有理由同时拥有文档和窗口滚动事件处理程序。

我认为你可以这样做：

$(window).scroll(function () {
    if ($(window).scrollTop() > 200) {
        $('.main-menu-top').addClass("sticky");
        if ($("#checkout_sticky").length === 0) {
            $('.main-menu-top').append('<div id="checkout_sticky"></div>');
        }
    } else {
        $('.main-menu-top').removeClass("sticky");
        $("#checkout_sticky").remove();
    }
});

工作演示：https://jsfiddle.net/jfriend00/w8toujfx/

如果这不是您想要的确切行为，请在您的问题中添加所需行为的更详细说明（以文字表示）。

我的Jquery函数的结果是跳跃的

1 个答案: