Banner not appearing on a certain part of page, html/css/js

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 help: [How can I tell if a DOM element is visible in the current viewport](https://stackoverflow.com/a/7557433/3113485) — terrymorse, Jan 13 '21 at 00:34
Your contact section could have an id. Add scroll event listener. Check for current scroll position of user relative to the contact and if scroll >contact show banner. — Jorge Guerreiro, Jan 13 '21 at 00:38
@sidekick12 Do you want something like this: https://stackoverflow-sidekick12.netlify.app/ — Manas Khandelwal, Jan 13 '21 at 01:14
ur missing the end banner tho, the banner u have is the start banner which appears at the start, the banner that is supposed to appear at the contact section is the end banner which as the message "Thanks for visiting" — , Jan 13 '21 at 01:19

score 1 · Answer 1 · answered Jul 16 '23 at 07:55

Modify your js code to this-

function openBanner() {
    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');
    });
  });
const observer = new IntersectionObserver(entries => {
    const banner = entries[0];
    if(banner.isIntersecting) openBanner()
}, {
   threshold: 0.3 /* Opens the banner when it is 30% visible. Feel free to modify */
});
observer.observe(document.querySelector('.exponea-banner1'))

Change the position: fixed to position: absolute in .exponea-banner & it would work.

IntersectionObserver API is used to easily check if a given element has appeared on the screen. In our case we are checking if you banner has & then opening it.

Know more about IntersectionObserver- Know more

Banner not appearing on a certain part of page, html/css/js

1 Answers1