滚动时触发弹出

Question

我试着制作一个简单的弹出框，当你到达页面底部时会触发它。问题是，当我关闭弹出，然后滚动回弹出弹出再次触发。我该怎么预防呢？下面是代码：

$(window).scroll(function(){
    if($(document).scrollTop()>=$(document).height()/3)
        $("#newsletter").slideDown(600, function () {
            $('#newsletter').css('display', 'block');
        });
});

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

如果您想看到完整的代码，下面是JSFiddle：https://jsfiddle.net/ilhamadli/jewoqg8h/18/

我感谢你给我的任何建议，谢谢。

编辑:我希望一旦关闭弹出框就不会再次被触发。

Answer 1

试试这个剧本。

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');
    });
}

更新答复

​

​

Answer 2

你的比较者错了，来试试这个

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

Answer 3

这里有一个解决方案，反复检查的滚动方向，然后到达底部.如果关闭弹出div并将其向上滑动，则此弹出div将不会显示，因为它不符合以下条件：

$(this).scrollTop() > last_scroll

​

var last_scroll = 0;
$(window).scroll(function() {
    if (Math.abs(last_scroll - $(this).scrollTop()) >= 0) {
        if ($(this).scrollTop() > last_scroll && $(document).scrollTop() >= $(document).height() / 3) {
            $("#newsletter").slideDown(600, function() {
                $('#newsletter').css('display', 'block');
            })
        } else {
            closePopup();
        }
        last_scroll = $(this).scrollTop();
    }
});

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

.news {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 50%;
}

.newsContent {
    color: #ffffff;
    background-color: rgba(0, 50, 82, 0.7);
    padding: 20px;
    border: none;
    width: 80%;
}

.newsContent h3 {
    font-weight: bold;
}

.newsContent form {
    padding-top: 10px;
}

.newsContent .email{
    width: 80%;
}

.newsContent .submit{
    background-color: red;
    border: solid red;
}

.close {
  float: right;
  font-size: 20px;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-shadow: 0 1px 0 #fff;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
  Scroll Down
</h1>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div id ="newsletter" class="news">
    <div class="newsContent">
        <span class="close" onclick="return closePopup()">&times;</span>
        <h3>Get latest updates in technologies</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam pretium vestibulum feugiat. Ut faucibus, erat id commodo lobortis, magna dui accumsan nulla.</p>
        <form action="#">
            <input class="email" type="email" id="email" name="email">
            <input class="submit" type="submit" value="Send it!">
        </form>
    </div>
</div>

​