Question

我希望在用户使用javascript滚动到页面高度的50％时显示弹出窗口。我遇到了一个问题： 1.当弹出窗口然后我点击关闭以关闭弹出窗口，然后我继续向下滚动，弹出窗口再次显示。（我试着看起来不像那样）。 2.如果我转到页面顶部并再次滚动到底部，弹出窗口再次显示。基本上我只想让弹出窗口显示1次任何建议？继承人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

使用简单boolean值条件。

<强> 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 2

只是跟踪它是否已经打开。

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

Answer 3

如果你完成了这个事件，你应该解开它。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

滚动时使弹出窗口可见

3 个答案: