Triggering Popup when Scrolling

Question

I try to make a simple Popup box that got triggered when you reach the bottom of the page. The problem is when I close the Popup and then scroll back up the Popup got triggered again. How do I prevent it? Here's the code:

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

If you want to see the full code, here's the JSFiddle: https://jsfiddle.net/ilhamadli/jewoqg8h/18/

I appreciate any advice you give, thank you.

Edit: I want the Popup box not to be triggered again once I close it

Answer 1

Here's a solution that double-checks the scrolling direction and hitting the bottom. If you close the pop-up div and slide it up, then this pop-up div will not be displayed, since it does not match the condition:

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

Answer 2

Try this script.

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

Updated answer

Answer 3

Your comparer is wrong, Here try this

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