如何使横幅出现在某个页面/部分？

Question

I want to display the secondbanner only on a certain page, but the problem I am facing right now is that it appears as soon the user scrolls down the website. But what I want is for it to appear only once it hits a certain section. Here is an example:

 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("open1"); executionFlag = false; } }; toastCloseSecond.addEventListener("click", function() { toastSecond.classList.remove("open1"); }); })

 /* SecondBanner */ html1, 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 0 20px rgba(0, 0, 0, 0.3); display: none; z-index: 9999999999; }.open1 { display: block; }.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; }

 <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <br> <section> <h2>Section I want the banner to appear in</h2> </section> <br> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <link rel="stylesheet" href="assets/css/banner.css"> <script src="assets/js/bannerclose1.js"></script> <div class="exponea-banner1" id="toastSecond"> <div class="exponea-close1" id="toastCloseSecond">&times;</div> <div class="exponea-text1"> Thanks for visiting! </div> <div class="exponea-label1">- Hussain Omer</div> </div>

The above code actually works fine because Stack Overflow creates a reference, but on my end, it doesn't work as shown above. Can someone take a look: https://repl.it/join/dasyglsi-hussainomer

In the above code, I have provided an example where the banner should appear in the bolded section which is shown in the code above. When the user hits that section, then the banner should appear or pop up otherwise it shouldn't. Right now, it pops up as soon as you scroll but I want it to pop up only on the section I highlighted in the above code.

Answer 1

The problem is that you are using a fixed number of pixels to subtract from the screen height

Instead, you should use a percentage of the height

 document.addEventListener("DOMContentLoaded", function(event) { let executionFlag = true; const toastSecond = document.getElementById("toastSecond"); const toastCloseSecond = document.getElementById("toastCloseSecond"); window.onscroll = function (b) { const percentToScroll = 0.7; //0.7 of the page if (window.innerHeight + window.scrollY >= document.body.offsetHeight * percentToScroll && executionFlag) { toastSecond.classList.add("open1"); executionFlag = false; } }; toastCloseSecond.addEventListener("click", function () { toastSecond.classList.remove("open1"); }); })

 /* SecondBanner */ html1, 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 0 20px rgba(0, 0, 0, 0.3); display: none; z-index: 9999999999; }.open1 { display: block; }.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; }

 <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <br> <section> <h2>Section I want the banner to appear in</h2> </section> <br> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <section> random text here </section> <link rel="stylesheet" href="assets/css/banner.css"> <script src="assets/js/bannerclose1.js"></script> <div class="exponea-banner1" id="toastSecond"> <div class="exponea-close1" id="toastCloseSecond">&times;</div> <div class="exponea-text1"> Thanks for visiting! </div> <div class="exponea-label1">- Hussain Omer</div> </div>