Question

当用户通过jQuery滚动时，我想要显示这个DIV。这是有效的（我修改了一个＆＃39;粘性NAV＆＃39;脚本）。我希望它在4秒后从视图中消失，所以我在延迟后添加了一个removeClass。这一切都有效，但我想确保只发生一次（这是用户可以向左和向右滑动的提示）。

这是HTML

     <div id="inhoudMobiel">

        <div id="swipetip"></div>

        <div id="swipetipanker"></div>

    </div>

这是jQuery：

<script>
$(document).ready(function() {
var stickyCount = 'aan';
console.log(stickyCount);
var stickyNavTop = $('#swipetipanker').offset().top;  

var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (stickyCount = 'aan') {
        if (scrollTop > stickyNavTop) {
            $('body').addClass('sticky');
            setTimeout(function(){$('body').removeClass('sticky')}, 4000);
            var stickyCount = 'uit';
            console.log(stickyCount);
        }
        }
    };

    $(window).scroll(function() {
            stickyNav();
    });
});

我添加了控制台日志行以查看会发生什么，它的工作方式与我预期的一样，控制台记录了“aan＆＃39;一次，在第一次滚动后，它会一直记录下来＆＃39; uit＆＃39;。但是DIV仍然会一遍又一遍地出现在每个卷轴上。

在第一个答案之后，我修改了我的代码：

$(document).ready(function() {

var stickyNavTop = $('#swipetipanker').offset().top;  

var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('body').addClass('sticky');
            setTimeout(function(){$('body').removeClass('sticky')}, 4000);
            var stickyCount = 0;
            console.log(stickyCount);
            }
        };

var stickyCount = 1;
console.log(stickyCount);

if (stickyCount === 1) {
    $(window).scroll(function() {
            stickyNav();
    });
}
});

替换了＆＃39; on＆＃39;并且＆＃39;关闭＆＃39;文本用0和1（更符合逻辑），主要是改进比较器实际比较而不是重新设置变量。我想要展示的DIV只出现在每一个滚动动作中。在控制台中，您将看到一个＆＃39; 1＆＃39;，然后是一系列零。因此，变量的重置有效，但比较器没有。滚动时，零也会不断出现，所以基本上滚动检测即使不应该也能继续工作。

Answer 1

如果你改变你的代码如下，它会阻止它运行多次在你的if语句中检测stickyCount是否从其初始值改变了，你使用的是=这是一项任务运算符，它更改了stickyCount的值而不是比较它。将其更改为===可确保您正在进行适当的比较，这正是您想要的。

$(document).ready(function() {
    var stickyCount = 'aan',
        firstRun = true;
    console.log(stickyCount);
    var stickyNavTop = $('#swipetipanker').offset().top;  

    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (stickyCount === 'aan') {
            if (scrollTop > stickyNavTop) {
                $('body').addClass('sticky');
                setTimeout(function(){$('body').removeClass('sticky')}, 4000);
                stickyCount = 'uit';
                console.log(stickyCount);
            }
        }
    };

    $(window).scroll(function() {
        stickyNav();
    });
});

Answer 2

我现在以一种不太优雅的方式解决了这个问题，但它确实做到了我需要的东西：

$(document).ready(function() {

var stickyNavTop = $('#swipetipanker').offset().top;

var stickyNav = function(){
    var scrollTop = $(window).scrollTop();
    if (scrollTop > stickyNavTop) {
        $('body').addClass('sticky');
        setTimeout(function(){$('body').removeClass('sticky')}, 4000);
        setTimeout(function(){$('#swipetip').remove()}, 4000);
    }
};

    $(window).scroll(function() {
        stickyNav();
    }); 
});

我只是删除＆＃34; swipetip＆＃34;在显示一次之后，来自DOM的DIV。不是那么优雅，因为滚动监听器保持原封不动，听不到任何东西，但它可以解决问题。

仅在滚动上显示div一次

2 个答案: