Banner not appearing on page

问题

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.

回答1:

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/

来源：https://stackoverflow.com/questions/65693191/banner-not-appearing-on-page

标签

javascript

html

css

web-deployment