I need to show a fixed div when i scroll onto and ID and then hide it when it gets to another ID or when a i scroll back to top and pass by the ID that had triggered it. At the moment my code is showing the div in the ID i want and it's hidding when i scroll back to top at the same ID position but im not beeing able to also hide it when the next ID appears.
This is a small example of my code
https://jsfiddle.net/wo45r3yv/2/
I want to show the .cscroll div on scroll down at id="show" and then on scroll top hide it again on id="show" (that's working), when it reaches id="last-div" i want it to disappear again but also to appear on scroll top when reaches the bottom of id=middle-div, basicly the main idea is to have the fixed bar appearing on id="middle-div" but trigered by div ID and not screen position
Hope someone can help me
Many thanks
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>