Highlight active div after scroll
Is there an easy way to highlight a top with id (apply css-class with specific color f.e.) after user scrolls to it? I have a scrollspy on page, but it seems that plugin will not help me, so I can't make to ends meet.
P.S. I didn't find alike info in Google or StackOverflow, so please, don't get me wrong.
There is a rough example of page
https://jsfiddle.net/masyurik/kdnzdeb2/#&togetherjs=DeaMiBADpp
HTML
<div id="secA" class="section">
Hello it's secA
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div id="secB" class="section">
Hello it's secB
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div id="secC" class="section">
Hello it's secC
<div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
CSS
.section {
background-color: red;
}
.active {
background-color: yellow;
}
Answers 1
Here is the solutions to detect the scroll to top event. Fire event when div is visible to visitor with jQuery?
Simply use jQuery to change the css of the element when scroll to top: $("#secA").css("background-color", "yellow");