Banner not appearing on page

Question

So, what I want is when I am scrolling down through my website, and when I reach a certain page (in this case it is the contact page), I want the end banner (more details are below) to appear right then at the bottom right of the website. It basically says a goodbye message, and you have the choice to close the end banner or keep it open.

Example:

(function() {
  requestAnimationFrame(function() {
    var banner1;
    banner1 = document.querySelector('.exponea-banner1');
    banner1.classList.add('exponea-in1');
    return banner1.querySelector('.exponea-close1').addEventListener('click', function() {
      return banner1.classList.remove('exponea-in1');
    });
  });

}).call(this);

@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
html,
body1 {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.exponea-banner1 {
  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 3px 30px rgba(116, 119, 176, 0.3);
  opacity: 0;
  transition: opacity 0.2s;
}
.exponea-banner1.exponea-in1 {
  opacity: 1;
  transition-duration: 0.4s;
}
.exponea-banner1 .exponea-close1 {
  position: absolute;
  top: 0;
  right: 0;
  padding: 5px 10px;
  font-size: 25px;
  font-weight: 300;
  cursor: pointer;
  opacity: 0.75;
}
.exponea-banner1 .exponea-label1 {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}
.exponea-banner1 .exponea-text1 {
  margin-bottom: 8px;
}
.exponea-banner1 .exponea-count1 {
  font-weight: 500;
}
.exponea-banner1 .exponea-label1 {
  text-align: left;
  bottom: 10px;
  right: 10px;
  font-size: 12px;
  opacity: 0.75;
}
.exponea-banner1,
.exponea-close1,
.exponea-text1,
.exponea-label1,
.exponea-label21 {
    z-index: 10;
}

<! ------- CSS of introduction banner------------------ --> 
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
html,
body {
  width: 100vw;
  height: 100vh;
  position: relative;
}

.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 3px 30px rgba(116, 119, 176, 0.3);
  opacity: 0;
  transition: opacity 0.2s;
}
.exponea-banner.exponea-in {
  opacity: 1;
  transition-duration: 0.4s;
}
.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;
}
.exponea-banner,
.exponea-close,
.exponea-text,
.exponea-label,
.exponea-label2 {
    z-index: 10;
}

<section>
INTRODUCTION</section>
<section>
<br>
<body>
  <script>
    (function() {
  requestAnimationFrame(function() {
    var banner;
    banner = document.querySelector('.exponea-banner');
    banner.classList.add('exponea-in');
    return banner.querySelector('.exponea-close').addEventListener('click', function() {
      return banner.classList.remove('exponea-in');
    });
  });

}).call(this);
    </script>
  <div class="exponea-banner">
  <div class="exponea-close">
    &times;
  </div>
  <div class="exponea-text">
    Hi there! Thanks for stumbling upon my website!
  </div>
  <div class="exponea-label">
    - Hussain Omer
  </div>
</div>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
Random stuff here
</section>
<section>
<h2> contact section </h2>
<!-- ======= Contact Section ======= --> -->
    <link rel="stylesheet" href="assets/css/bannerclose.css">
    <body>
  <div class="exponea-banner1">
  <div class="exponea-close1">
    &times;
  </div>
  <div class="exponea-text1">
    Thanks for visiting! &#58398;
  </div>
    </div>
  <div class="exponea-label1">
    - Hussain Omer
  </div>
</div>

So I provided an example, I already have the start banner in my website included, like the introduction banner works fine and everything. The end banner, or the banner that I want to appear once I scroll down to the contact section is not quite working.

How would I make it so that when the person scrolls down to the contact section, the banner only then appears near the bottom of the page? Because right now it's appearing all over the website but I want the end banner (which has the "thanks for visiting" message) to appear only after the contact section.

Please help, its been 2 days and I still couldn't figure out a way.

Does this answer your question? [How can I tell if a DOM element is visible in the current viewport?](https://stackoverflow.com/questions/123999/how-can-i-tell-if-a-dom-element-is-visible-in-the-current-viewport) — imvain2, Jan 12 '21 at 22:58
I think you are looking for JS's IntersectionObserver [link]https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API but you also need to review your use of requestAnimationFrame - it gets called on load I'm not sure why and its callback function makes the Thanks section displayed immediately. — A Haworth, Jan 12 '21 at 23:33
@sidekick12 Do you want something like this: https://stackoverflow-sidekick12.netlify.app/ — Manas Khandelwal, Jan 13 '21 at 01:11
@sidekick12 I have added the answer. Sorry, I just forgot to add the answer. Thank you for reminding me. — Manas Khandelwal, Jan 13 '21 at 14:19

score 0 · Answer 1 · answered Jan 13 '21 at 14:19

Use this to detect, If the user has reached the end of the page and to enable closing by clicking on the close icon:

const toast = document.getElementById("toast");
const toastClose = document.getElementById("toastClose");
window.onscroll = function (b) {
  if (window.innerHeight + window.scrollY >= document.body.offsetHeight) {
    toast.classList.add("open");
  }
};
toastClose.addEventListener("click", function () {
  toast.classList.remove("open");
});

Codepen: https://codepen.io/manaskhandelwal1/pen/ExgdzWd

Live link: https://stackoverflow-sidekick12.netlify.app/

Banner not appearing on page

1 Answers1