Блог

Главная - Вопросы по программированию - Как сделать так, чтобы баннер отображался на определенной странице/разделе?

Как сделать так, чтобы баннер отображался на определенной странице/разделе?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу отображать secondbanner только на определенной странице, но проблема, с которой я сейчас сталкиваюсь, заключается в том, что она появляется, как только пользователь прокручивает веб-сайт вниз. Но я хочу, чтобы он появлялся только после того, как попадет в определенный раздел. Вот пример:

 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 amp;amp; 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">amp;times;</div>
  <div class="exponea-text1"> Thanks for visiting!
  </div>
  <div class="exponea-label1">- Hussain Omer</div>
</div>

Приведенный выше код на самом деле работает нормально, потому что переполнение стека создает ссылку, но, с моей стороны, это работает не так, как показано выше. Может кто-нибудь взглянуть: https://repl.it/join/dasyglsi-hussainomer

В приведенном выше коде я привел пример, в котором баннер должен отображаться в выделенном жирным шрифтом разделе, который показан в приведенном выше коде. Когда пользователь попадает в этот раздел, баннер должен появиться или появиться, иначе он не должен. Прямо сейчас он появляется, как только вы прокручиваете, но я хочу, чтобы он появлялся только в разделе, который я выделил в приведенном выше коде.

Комментарии:

1. Используйте это вместо этого: developer.mozilla.org/en-US/docs/Web/API /… (кроме того, repl.it хочет, чтобы я вошел в систему, плюс вам нужно вставить в свой вопрос код, который повторяет проблему, иначе люди проголосуют за ее закрытие)

2. Что ж, в этом-то и проблема. StackOverflow и я считаю, что некоторые другие IDE подходят для приведенного выше кода, это просто repl.it вот и совершается эта ошибка. И я не могу переключиться с repl.it к другой IDE, потому что я должен использовать это. Не могли бы вы просто быстро создать учетную запись и помочь, пожалуйста?

3. Чем это отличается от трех предыдущих вопросов, которые вы задавали с почти таким же названием?

Ответ №1:

Проблема в том, что вы используете фиксированное количество пикселей для вычитания из высоты экрана

Вместо этого вы должны использовать процент от высоты

 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 amp;amp; 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">amp;times;</div>
  <div class="exponea-text1"> Thanks for visiting!
  </div>
  <div class="exponea-label1">- Hussain Omer</div>
</div>

Комментарии:

1. Похоже, это не работает. Проверьте это: repl.it/join/gmprptdy-hussainomer

2. Привет, ты можешь видеть мои сообщения на repl.it сайт?

3. Эй, чувак, я заставил это работать, все, что мне нужно было сделать, это изменить название классов 🙂