javascript - 隐藏 <section> 末尾的 div

Question

我知道如何显示或隐藏 div。 当滚动到第2秒时； “横幅”div 必须在 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>

希望有人能帮助我。

Answer 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 && 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>