Hide a div at end of <section>

user_10671469 0
Viewed 68

I know how to show or hide a div. When scroll to sec 2; The 'banner' div has to be visible at the beginning of sec2 (section) and hide when sec2 section ends. But don't how to check if (in this case) 'sec2' is ended. This has to be sticky? under the (sticky) menubar.

This is a not the real source, but the same scripts and css settings. Because the real page is to big to publish here.

$(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>

Hope someone can help me out.

css html jquery javascript
2 Answers

Make the banner inside the section and use position:fixed for it and with a clip-path trick you hide it from the outside:

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>

user_86203330

I slightly changed the structure of your html, wrapping the sections tags in div:

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

This is done so that the stickiness rule works at the height of all sections. And he also made adjustments to the 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>

user_135734440
Related