CODEWITHSUNDEEP
javascripthtmlcss
user14945402
user14945402

Reputation:

How to fix banner popping up each time the user scrolls?

I am trying to include the banner in my website and need help, as whenever the user scrolls, the banner pops up. Once the user removes the banner, the banner should be completely removed but I do not know how to fix that. Any help would be highly appreciated!

document.addEventListener("DOMContentLoaded", function(event) { 
const toastSecond = document.getElementById("toastSecond");

const toastCloseSecond = document.getElementById("toastCloseSecond");

window.onscroll = function (b) {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 900) {
    toastSecond.classList.add("open");
  }
};

toastCloseSecond.addEventListener("click", function () {
  toastSecond.classList.remove("open");
});

})
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");

.exponea-banner {
  font-family: Roboto, sans-serif;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #2e364d;
  color: #ebeef7;
  padding: 30px 80px 30px 35px;
  font-size: 16px;
  line-height: 1;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 9999999999;
}
.open {
  display: block;
}

.exponea-banner .exponea-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
  font-size: 25px;
  font-weight: 300;
  cursor: pointer;
  opacity: 0.75;
}
.exponea-banner .exponea-label {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}
.exponea-banner .exponea-text {
  margin-bottom: 8px;
}
.exponea-banner .exponea-count {
  font-weight: 500;
}
.exponea-banner .exponea-label {
  text-align: left;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}
 <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
 <script src="assets/js/bannerclose1.js"></script>
<link rel="stylesheet" href="assets/css/bannerclose.css"> 
<div class="exponea-banner" id="toastSecond">
  <div class="exponea-close" id="toastCloseSecond">&times;</div>
  <div class="exponea-text"> Thanks for visiting!
  </div>
  <div class="exponea-label">- Hussain Omer</div>
</div>

As you can see the banner after you close still appears once you scroll, how would I fix this?

Upvotes: 1

Views: 53

Answers (1)

Ahmed Gaafer
Ahmed Gaafer

Reputation: 1671

Add a global flag to execute this function only one time.

document.addEventListener("DOMContentLoaded", function(event) { 
let executionFlag = true;
const toastSecond = document.getElementById("toastSecond");

const toastCloseSecond = document.getElementById("toastCloseSecond");

window.onscroll = function (b) {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight - 900 && executionFlag) {
    toastSecond.classList.add("open");
    executionFlag = false;
  }
};

toastCloseSecond.addEventListener("click", function () {
  toastSecond.classList.remove("open");
});

})
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");

.exponea-banner {
  font-family: Roboto, sans-serif;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #2e364d;
  color: #ebeef7;
  padding: 30px 80px 30px 35px;
  font-size: 16px;
  line-height: 1;
  border-radius: 5px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 9999999999;
}
.open {
  display: block;
}

.exponea-banner .exponea-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
  font-size: 25px;
  font-weight: 300;
  cursor: pointer;
  opacity: 0.75;
}
.exponea-banner .exponea-label {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}
.exponea-banner .exponea-text {
  margin-bottom: 8px;
}
.exponea-banner .exponea-count {
  font-weight: 500;
}
.exponea-banner .exponea-label {
  text-align: left;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}
<section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
  <section>
 hello
 </section>
 <script src="assets/js/bannerclose1.js"></script>
<link rel="stylesheet" href="assets/css/bannerclose.css"> 
<div class="exponea-banner" id="toastSecond">
  <div class="exponea-close" id="toastCloseSecond">&times;</div>
  <div class="exponea-text"> Thanks for visiting!
  </div>
  <div class="exponea-label">- Hussain Omer</div>
</div>

Upvotes: 1

Related Questions