make popup visible when scrolling

Question

i want to show popup when user scroll to 50% of the page height with javascript. i got a problem: 1.when the popup show then i click close to close the popup, and i continue scroll down, the popup show again. (i try to didnt look like that). 2. if i go to the top of the page and i scroll to bottom again, the popup show again. basicaly i just want the popup to show 1 times any suggestion? heres the jsfiddle

https://jsfiddle.net/xsv2u0sy/

   window.onscroll = function(ev) {
        if ((window.innerHeight+window.scrollY) >= halfScreen) {
            if(popUp.className === "hide"){
                popUp.className = "";
            }
        }
   };
   for(var i = 0; i<closePopUp.length; i++){
        closePopUp[i].addEventListener('click', function(event) {
            if(popUp.className === ""){
               popUp.className = "hide";
            }
        });
   }

Answer 1

If you are done with the event you should unbind it.

var popUp = document.getElementById("popup");
var closePopUp = document.getElementsByClassName('close');
var halfScreen = document.body.offsetHeight / 2;


function checkScroll(ev) {
  if ((window.innerHeight + window.scrollY) >= halfScreen) {
    popUp.className = "";
    document.removeEventListener('scroll', checkScroll, false);
  }
};

for (var i = 0; i < closePopUp.length; i++) {
  closePopUp[i].addEventListener('click', function(event) {
    if (popUp.className === "") {
      popUp.className = "hide";
    }
  });
}

document.addEventListener('scroll', checkScroll, false);

#popup {
  background: red;
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 15px;
  height: 150px;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.hide {
  display: none;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
  ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
  eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
  reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
  rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
  provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
  ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
  eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
  reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
  rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
  provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
  ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
  eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
  reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
  rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
  provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
  ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
  eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
  reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
  rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
  provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<div id="popup" class="hide">
  <button class="close">x</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quibusdam ea, aspernatur, ipsum magnam nemo. Neque quod ullam ipsa veritatis, saepe facilis officiis officia odit quasi minima aliquam reiciendis ea, voluptatem, adipisci corporis deserunt.
    Aspernatur officia, qui corporis tempora labore sunt. Alias repellat dolorum, porro repellendus, cum quod enim optio tempore iure. Excepturi adipisci quod doloribus assumenda suscipit rerum ad enim vitae minus fugiat! Quis blanditiis tempora cumque
    voluptate</p>
</div>

Answer 2

Used simple boolean value condition.

Jsfiddle link

var popUp = document.getElementById("popup");
var closePopUp = document.getElementsByClassName('close');
var halfScreen = document.body.offsetHeight / 2;
var bool = true;

window.onscroll = function(ev) {
  if ((window.innerHeight + window.scrollY) >= halfScreen && bool) {
    if (popUp.className === "hide") {
      popUp.className = "";
    }
    bool = false;
  }
};
for (var i = 0; i < closePopUp.length; i++) {
  closePopUp[i].addEventListener('click', function(event) {
    if (popUp.className === "") {
      popUp.className = "hide";
    }
  });
}

#popup {
  background: red;
  position: fixed;
  top: 50%;
  left: 50%;
  padding: 15px;
  height: 150px;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
.hide {
  display: none;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
  ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
  eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
  reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
  rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
  provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
  ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
  eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
  reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
  rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
  provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
  ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
  eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
  reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
  rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
  provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore illum doloribus, numquam rem earum magnam iusto reprehenderit possimus natus quae itaque tempora molestias, ut. Voluptas temporibus, illum a odit, dolorem porro quisquam tempore nemo ad
  ratione velit dignissimos ullam sed deleniti culpa quos natus laudantium est, quas iste! Saepe, dolor repellendus. Incidunt debitis unde facere nisi nesciunt, aliquid. Esse praesentium nostrum iste est perferendis dolores minima tempora corrupti vel
  eveniet blanditiis sit quam ad numquam fuga, voluptate sunt, rem sint animi nihil consequatur. Magnam vel ex aliquid! Consequatur, odit quae ipsum natus eum tempore hic magni alias modi perferendis dolores animi. Voluptatibus, nesciunt. Illum libero
  reprehenderit non cum perferendis dolorum inventore, cumque magni fugiat, animi pariatur esse dolor nostrum error! Nulla eos, ratione expedita ipsam dignissimos soluta maiores, voluptatem non molestias blanditiis accusantium, officia dolorem quo doloremque
  rerum temporibus fuga at maxime corporis facere amet dolores eius! Perferendis, hic dolore tenetur quasi unde laborum ab dolores nulla suscipit rerum, iste, a sed sequi esse illum deleniti cum quibusdam enim soluta. Amet laborum officia sit sequi, porro
  provident beatae recusandae, fugiat totam reiciendis repellendus tempora obcaecati nulla suscipit hic a minus? Alias veniam velit asperiores quia voluptates dignissimos soluta! Architecto, voluptate!
</p>
<div id="popup" class="hide">
  <button class="close">x</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad quibusdam ea, aspernatur, ipsum magnam nemo. Neque quod ullam ipsa veritatis, saepe facilis officiis officia odit quasi minima aliquam reiciendis ea, voluptatem, adipisci corporis deserunt.
    Aspernatur officia, qui corporis tempora labore sunt. Alias repellat dolorum, porro repellendus, cum quod enim optio tempore iure. Excepturi adipisci quod doloribus assumenda suscipit rerum ad enim vitae minus fugiat! Quis blanditiis tempora cumque
    voluptate</p>
</div>

Answer 3

Just track if it was opened already.

var needsPopup = true;

window.onscroll = function(ev) {
    if (needsPopup && (window.innerHeight+window.scrollY) >= halfScreen) {
        if(popUp.className === "hide"){
            popUp.className = "";
            needsPopup = false;
        }
    }
};

for(var i = 0; i<closePopUp.length; i++){
    closePopUp[i].addEventListener('click', function(event) {
        if(popUp.className === ""){
           popUp.className = "hide";
        }
    });
}