Javascript 滚动时触发弹出窗口

我试着制作一个简单的弹出框，当你到达页面底部时会被触发。问题是当我关闭弹出窗口，然后向上滚动时，弹出窗口再次被触发。我如何预防它？代码如下：

$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>=$（文档）.height（）/3）
$（“#时事通讯”）。向下滑动（600，函数（）{
$（“#时事通讯”）.css（'display'，'block'）；
});
});
函数closePopup（）{
$（“#时事通讯”）。幻灯片（600，函数（）{
$（“#时事通讯”）.css（'display'，'none'）；
});
}

如果您想查看完整代码，下面是JSFIDLE：

谢谢你给我的建议

编辑：我希望弹出框在关闭后不会再次被触发。请尝试此脚本

var isclosed = false

$(window).scroll(function(){
    if($(window).scrollTop() + $(window).height() == $(document).height() && !isclosed)
        $("#newsletter").slideDown(600, function () {
            $('#newsletter').css('display', 'block');
        });
});

function closePopup(){
isclosed = true;
    $('#newsletter').slideUp(600, function () {
        $('#newsletter').css('display', 'none');
    });
}

最新答案

---

您的比较器错误，请尝试此选项

$(window).scroll(function(){
    if($(window).scrollTop() + $(window).height() == $(document).height())
        $("#newsletter").slideDown(600, function () {
            $('#newsletter').show();
        });
});

---

这里有一个解决方案，仔细检查滚动方向并点击底部。如果关闭弹出div并将其向上滑动，则不会显示该弹出div，因为它与以下条件不匹配：

$(this).scrollTop() > last_scroll

var last\u scroll=0；
$（窗口）。滚动（函数（）{
if（Math.abs（最后一次滚动-$（this.scrollTop（））>=0）{
if（$（this）.scrollTop（）>最后一次滚动&&$（document）.scrollTop（）>=$（document）.height（）/3）{
$（“#时事通讯”）。向下滑动（600，函数（）{
$（“#时事通讯”）.css（'display'，'block'）；
})
}否则{
closePopup（）；
}
last_scroll=$（this.scrollTop（）；
}
});
函数closePopup（）{
$（“#时事通讯”）.slideUp（600，函数（）{
$（“#时事通讯”）.css（'display'，'none'）；
});
}

.news{
显示：无；
位置：固定；
z指数：1；
左：0；
底部：0；
宽度：50%；
}
.新闻内容{
颜色：#ffffff；
背景色：rgba（0,50,82,0.7）；
填充：20px；
边界：无；
宽度：80%；
}
.新闻内容h3{
字体大小：粗体；
}
.新闻内容表格{
填充顶部：10px；
}
.新闻内容.电子邮件{
宽度：80%；
}
。新闻内容。提交{
背景色：红色；
边框：纯红；
}
.结束{
浮动：对；
字体大小：20px；
字体大小：粗体；
线高：1；
颜色：#ffffff；
文本阴影：0 1px 0#fff；
}
.关闭：悬停，
.结束：聚焦{
颜色：#000；
文字装饰：无；
光标：指针；
过滤器：α（不透明度=50）；
不透明度：0.5；
}

向下滚动








































&时代；
获取最新的技术更新
Lorem ipsum dolor sit amet，是一位杰出的献身者。前庭前的不平等。但是，福西布斯，洛博蒂斯百货公司，纳拉大酒庄

hmm。。。。我不知道出了什么问题，现在当我到达页面底部时，弹出框甚至不会弹出。@ilhamadli检查这个更新的答案。当我打开你的fiddle链接时。当我到达底部时，它仍然没有显示任何东西。我想知道我的浏览器出了什么问题。我在你的代码中更改了一行，它就工作了。我将“$（窗口）.scrollTop（）+$（窗口）.height（）==$（文档）.height（）”更改为“$（文档）.scrollTop（）>=$（文档）.height（）/3”。谢谢你，亚萨斯！我试过这个方法，当我到达页面底部时，它没有显示弹出框。这很奇怪，我试过它，它在fiddler上工作。是的，我也在fiddle上试过。我知道这很奇怪，但一旦我到达底部，它就什么也看不出来了