Necesito mostrar un div fijo cuando me desplazo hacia una identificación y luego lo oculto cuando llega a otra identificación o cuando me desplazo hacia arriba y paso por la identificación que lo activó. En este momento, mi código muestra el div en la ID que quiero y se oculta cuando me desplazo hacia arriba en la misma posición de ID, pero no puedo ocultarlo cuando aparece la siguiente ID.
Este es un pequeño ejemplo de mi código.
https://jsfiddle.net/wo45r3yv/2/
Quiero mostrar el div .cscroll en el desplazamiento hacia abajo en id="mostrar" y luego en la parte superior del desplazamiento ocultarlo nuevamente en id="mostrar" (eso está funcionando), cuando llegue a id="last-div" quiero que lo haga desaparezca nuevamente, pero también aparecerá en la parte superior de desplazamiento cuando llegue al final de id=middle-div, básicamente, la idea principal es que la barra fija aparezca en id="middle-div" pero activada por la ID de div y no por la posición de la pantalla
Espero que alguien pueda ayudarme
Muchas gracias
var offsetTop = $("#show").offset().top; $(window).scroll(function(){ var scrollTop = $(window).scrollTop(); if(scrollTop > offsetTop){ $(".sticky-section").slideDown('200'); $(".cscroll").fadeIn('200'); } else { $(".sticky-section").slideUp('200'); $(".cscroll").fadeOut('200'); } }); #first-div { height: 600px; background-color: red; } #middle-div { height: 1600px; background-color: blue; } #last-div { height: 2600px; background-color: green; } .cscroll { width : 100%; } .sticky-section { position: fixed; top: 0px; z-index: 8; background-color: white; color: black; padding-top: 10px; padding-bottom: 5px; display: none; text-align: center; box-shadow: 0px 12px 21px -8px rgba(0,0,0,0.32); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="first-div"> MASTER </div> <div id="show"></div> <div class="cscroll sticky-section"> <h4> sticky content headline </h4> <h5> more texts </h5> </div> <div id="middle-div"> NEW DIV </div> <div id="last-div"> LAST DIV </div>