Скрыть div в конце

ProgramBox

Скрыть div в конце

Post author:admin
Запись опубликована:2 сентября, 2022
Post category:Вопросы по программированию

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

Я знаю, как показать или скрыть div. При прокрутке до раздела 2; div ‘banner’ должен быть виден в начале раздела sec2 (раздел) и скрываться, когда раздел sec2 заканчивается. Но не знаю, как проверить, закончился ли (в данном случае) ‘sec2’ . Это должно быть липким? под (липкой) панелью меню.

Это не реальный источник, а те же скрипты и настройки css. Потому что реальная страница слишком большая для публикации здесь.

 $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    var showbar = $('#sec2').height();
    var showbar = showbar -25;

    if ( scrollTop > showbar) { 
        $("#banner").fadeIn(700);
    }else{
        $("#banner").fadeOut(250);
    }
});

 html, body {
  margin:0px;
  height:100%;
  width:100%;
  padding:0;
  scroll-behavior: smooth;
}

.container {
    position: absolute;
    width:100%;
    min-height:100%;
    height:100%;
    text-align: center;
}

.wrapper{
    position: relative;
    width:100%;
    max-width:1000px;
    height:100%;
}

section {
    display: block;
    color:white;
    height:100%;
    
    
}

#menubar{
  position: -webkit-sticky;
  position: sticky;
  top:0px;
  width:100%;
  background-color:black;
  
  height:25px;
  text-align: center;
  z-index:1000;
  
}

#menubar a {
  margin:20px 20px 20px 20px;
  text-decoration:none;
  color:white;
  font-weight:bold;
}

#menubar a:hover {
  color:yellow; 
}

#sec1 {
  background-color:red;
}

#sec2 {
  background-color:blue;
}

#sec3 {
  background-color:green;
}

#banner {
  display:none;
  z-index:1000;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 25;
  height:35px;
  color:black;
  background-color:white;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <div id="menubar">
      <a href="#sec1">Section 1</a>
      <a href="#sec2">Section 2</a>
      <a href="#sec3">Section 3</a>
    </div>
    <div id="banner">Show this div only in section 2</div>
    <section id="sec1"> bla  </section>
    <section id="sec2"> bla bla </section>
    <section id="sec3"> bla bla bla </section>
  </div>
</div>
    <script>
        function scrolled(o){
            //visible height   pixel scrolled = total height
            if(o.offsetHeight   o.scrollTop == o.scrollHeight){
                var x = document.getElementById("#banner");
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }}
    </script>

Надеюсь, кто-нибудь сможет мне помочь.

Ответ №1:

Я немного изменил структуру вашего html, обернув теги разделов в div:

 <div class="sections">
    <section id="sec1"> bla  </section>
    <section id="sec2"> bla bla </section>
    <section id="sec3"> bla bla bla </section>
</div>

Это сделано для того, чтобы правило липкости работало на высоте всех разделов. И он также внес коррективы в css.

 $(window).scroll(function() {
    var scrollTop = $(window).scrollTop();
    var showbar = $('#sec2').height();
    var showbar_out = $('#sec3').height();
    var showbar = showbar /*-25*/;
    
 if ( scrollTop > showbar amp;amp; scrollTop < showbar_out) { 
        $("#banner").fadeIn(700);
    }else{
        $("#banner").fadeOut(250);
    }       
    
    
});

 html, body {
  margin:0px;
  height:100%;
  width:100%;
  padding:0;
  scroll-behavior: smooth;
}

.container {
    position: absolute;
    width:100%;
    min-height:100%;
    height:100%;
    text-align: center;
}

.wrapper{
    position: relative;
    width:100%;
    max-width:1000px;
    /*height:100%;*/
}

.sections {
    display: flex;
    flex-direction: column;
}

section {
    display: block;
    color:white;
    /*height:100%;*/
    height: 100vh;
}

#menubar{
  position: -webkit-sticky;
  position: sticky;
  top:0px;
  width:100%;
  background-color:black;
  
  height:25px;
  text-align: center;
  z-index:1000;
  
}

#menubar a {
  margin:20px 20px 20px 20px;
  text-decoration:none;
  color:white;
  font-weight:bold;
}

#menubar a:hover {
  color:yellow; 
}

#sec1 {
  background-color:red;
}

#sec2 {
  background-color:blue;
}

#sec3 {
  background-color:green;
}

#banner {
  display:none;
  z-index:1000;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 25px;
  height:35px;
  color:black;
  background-color:white;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <div id="menubar">
      <a href="#sec1">Section 1</a>
      <a href="#sec2">Section 2</a>
      <a href="#sec3">Section 3</a>
    </div>
    <div id="banner">Show this div only in section 2</div>
    <div class="sections">
    <section id="sec1"> bla  </section>
    <section id="sec2"> bla bla </section>
    <section style="height: 200vh" id="sec3"> bla bla bla </section>
    </div>
  </div>
</div>
    <script>
       /* function scrolled(o){
            //visible height   pixel scrolled = total height
            if(o.offsetHeight   o.scrollTop == o.scrollHeight){
                var x = document.getElementById("#banner");
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }}*/
    </script>

1. Спасибо! это лучше, но все еще возникает проблема, заключающаяся в том, что баннер div не скрывается при запуске раздела 3. Но это работает при переходе к разделу 1.

2. Ах… точно. Есть такой недостаток. Я исправлю это чуть позже.

3. ты мой герой.. похоже, очень простое решение.

4. редактировать * обнаружена эта проблема .. все еще видна небольшая часть раздела 2, если вы перейдете от раздела 1 к разделу 3. * о: ( пока нет .. происходит что-то странное. Если я перехожу из раздела 1 в раздел 3. баннер отображается и начинает мигать. И когда я меняю раздел, он продолжает мигать.

5. У меня все работает хорошо. Скорее всего, мигание, о котором вы говорите, — это fade анимация, которая не успевает завершиться из-за задержки.

Ответ №2:

Создайте баннер внутри раздела и используйте position:fixed для него, а с помощью трюка с обрезкой пути вы скроете его снаружи:

 html,
body {
  margin: 0px;
  height: 100%;
  width: 100%;
  padding: 0;
  scroll-behavior: smooth;
}

.container {
  position: absolute;
  width: 100%;
  min-height: 100%;
  height: 100%;
  text-align: center;
}

.wrapper {
  position: relative;
  width: 100%;
  max-width: 1000px;
  height: 100%;
}

section {
  display: block;
  color: white;
  height: 100%;
}

#menubar {
  position: sticky;
  top: 0px;
  width: 100%;
  background-color: black;
  height: 25px;
  text-align: center;
  z-index: 1000;
}

#menubar a {
  margin: 20px 20px 20px 20px;
  text-decoration: none;
  color: white;
  font-weight: bold;
}

#menubar a:hover {
  color: yellow;
}

#sec1 {
  background-color: red;
}

#sec2 {
  background-color: blue;
  clip-path:inset(0); /* this will keep the banner inside sec2 */
}

#sec3 {
  background-color: green;
}

#banner {
  z-index: 1000;
  position: fixed;
  top: 25px;
  height: 35px;
  color: black;
  background-color: white;
}

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="wrapper">
    <div id="menubar">
      <a href="#sec1">Section 1</a>
      <a href="#sec2">Section 2</a>
      <a href="#sec3">Section 3</a>
    </div>
    <section id="sec1"> bla </section>
    <section id="sec2">
      <div id="banner">Show this div only in section 2</div>
      bla bla </section>
    <section id="sec3"> bla bla bla </section>
  </div>
</div>