Блог

Главная - Вопросы по программированию - Как скрыть и показать элемент в определенном разделе страницы?

Как скрыть и показать элемент в определенном разделе страницы?

#javascript #html #css

#javascript #HTML #css

Вопрос:

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

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

Я пытался использовать JavaScript, но он не работает, этот код скрывает всплывающее модальное окно для всех разделов.

 var mainbanner = document.querySelector(".banner"); 
if (mainbanner.top != window.self) {
    document.getElementByClassName("float-popup").style.display = "none ";
 } 
  

 section{
  height:300px;
  text-align:center;
}
section:nth-child(odd) {
  background:#acacac;
}
section:nth-child(even) {
  background:#e47d7d;
}
p{
  color:red;
}
.float-popup{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#000;
  text-align:center;
}
body{
  position:relative;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <section class="banner">
    <p>banner content</p>
  </section>
  <section class="services">
    <p>services content</p>
  </section>
  <section class="features">
    <p>features content</p>
  </section>
  <section class="footer">
    <p>footer content</p>
  </section>

  <div class="float-popup">
    <p>float content</p>
  </div>
</body>

Ответ №1:

Даже я искал решение точно такой же проблемы, и я нашел ее решение. Я попробовал некоторый код, и он работал нормально. Это сработало бы:

 function checkFloatingDiv() {
  var section1 = document.querySelector('.banner');
  var position1 = section1.getBoundingClientRect();
  var section2 = document.querySelector('.footer');
  var position2 = section2.getBoundingClientRect();

  //Checking whether the specified sections are visible
  //If any of them is visible, then show the float content. Else, hide it.
  if (position1.top < window.innerHeight amp;amp; position1.bottom >= 0) {
    //Show the floating element
    document.querySelector('.float-popup').style.display = "block";
    return;
  } else {
    document.querySelector('.float-popup').style.display = "none";
  }

  if (position2.top < window.innerHeight amp;amp; position2.bottom >= 0) {
    //Show the floating element
    document.querySelector('.float-popup').style.display = "block";
  } else {
    document.querySelector('.float-popup').style.display = "none";
  }
}

// Run the function on scroll
window.addEventListener("scroll", checkFloatingDiv);
// Run the function on load, if any elements are already visible without scrolling
window.addEventListener("load", checkFloatingDiv);  
 section {
  height: 300px;
  text-align: center;
}

section:nth-child(odd) {
  background: #acacac;
}

section:nth-child(even) {
  background: #e47d7d;
}

p {
  color: red;
}

.float-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #000;
  text-align: center;
}

body {
  position: relative;
}  
 <section class="banner">
  <p>banner content</p>
</section>
<section class="services">
  <p>services content</p>
</section>
<section class="features">
  <p>features content</p>
</section>
<section class="footer">
  <p>footer content</p>
</section>

<div class="float-popup" style="display: none;">
  <p>float content</p>
</div>

P / S: В этом коде я привел пример того, что содержимое с плавающей точкой будет видно только тогда, когда содержимое «баннера» и «нижнего колонтитула» будет видно на экране. Вы определенно можете изменить его в соответствии с вашими требованиями.

Ответ №2:

getElementByClassName не является функцией, попробуйте это вместо

 document.getElementsByClassName("float-popup")[0].style.display = "none";

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

1. спасибо за ваш ответ. но если я использую ваш код, это скроется для всех разделов. я хочу, чтобы при прокрутке баннера и нижнего колонтитула всплывающее окно скрывалось, а для других разделов оно должно отображаться во время прокрутки.

Ответ №3:

document.getElementByClassName это не функция JavaScript, вы, кажется, имеете в виду document.getElementsByClassName функцию (обратите внимание на элементы), которая возвращает массив. Итак, если есть только один элемент с этим именем класса, просто получите 0-й индекс этого массива.

Вот так:

     document.getElementsByClassName("float-popup")[0].style.display = "none ";
  

 const mainbanner = document.getElementsByClassName("banner")[0]; // I'm assuming this is what "mainbanner" variable is

if (mainbanner.top != window.self) {
    document.getElementsByClassName("float-popup")[0].style.display = "none";
 }  
 section{
  height:300px;
  text-align:center;
}
section:nth-child(odd) {
  background:#acacac;
}
section:nth-child(even) {
  background:#e47d7d;
}
p{
  color:red;
}
.float-popup{
  position:fixed;
  bottom:0;
  left:0;
  width:100%;
  background:#000;
  text-align:center;
}
body{
  position:relative;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <section class="banner">
    <p>banner content</p>
  </section>
  <section class="services">
    <p>services content</p>
  </section>
  <section class="features">
    <p>features content</p>
  </section>
  <section class="footer">
    <p>footer content</p>
  </section>

  <div class="float-popup">
    <p>float content</p>
  </div>
</body>

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

1. это скрывает всплывающее модальное окно для всех разделов. Я спросил, что он должен скрываться при прокрутке только баннера и нижнего колонтитула, но если я представляю в сервисах или функциях, он должен отображаться в нижней части с плавающей точкой.

2. Все, что я сделал, это исправил ваш JavaScript, который вы не реализовали должным образом getElementsByClassName(...)[0]

3. при прокрутке это скрывается для всех разделов. Мне нужно, чтобы он скрывал только разделы.

4. Ну, если вы хотите, чтобы он обновлялся, ваш JavaScript должен быть в каком-то цикле

5. Или привязать прослушиватель событий к прокрутке

Ответ №4:

Я предполагаю, что вы выполняете какую-то работу, когда определенный div (баннер / нижний колонтитул) виден в окне просмотра. Если это то, что вы ищете, вы можете использовать это.

 function isInViewport(el) {
    const rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 amp;amp;
        rect.left >= 0 amp;amp;
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) amp;amp;
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)

    );
}


const banner = document.querySelector('.banner');
const footer = document.querySelector('.footer');
const floatPopup = document.querySelector('.float-popup');

document.addEventListener('scroll', () => {
    const floatPopupDisplay = isInViewport(banner) || isInViewport(footer) ?
       "block" : 'none';

    floatPopup.style.display = floatPopupDisplay;

}, {
    passive: true
});

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

1. да … что бы вы ни говорили, это правильно. но ваш код также не работает.