I'm facing a common issue on StackOverflow, but the solutions I've come across so far haven't completely resolved my problem. To understand the issue better, you can take a look at this fiddle that I found referenced here. My challenge lies in applying this solution to my HTML structure, which is different from the one shown below:
This is how my HTML section appears:
<div id="cms-menu" data-pagename="FAQS">
Header html
</div>
<section class="help-centre xs-pt-20 xs-pb-20">
<div class="container-fluid left-container-padding right-container-padding">
<div class="row">
<div class="col-xs-12 text-left">
<h2>Help Centre</h2>
<p>Search or browse our frequently asked questions below</p>
</div>
</div>
</div>
</section>
... (HTML content continues)
As the page scrolls towards the footer, my sticky sidebar disappears (similar to the scenario depicted in this fiddle linked above). How can I make it stick to the page as it reaches the footer? Given that I'm utilizing Umbraco and unable to modify the existing HTML structure, I seek guidance on how to handle this with CSS expertise beyond my reach. Below is the relevant CSS styles:
... (CSS styling content excluded for brevity)Note: The dynamically generated content sections (A to I) may expand in the future.
SOLUTION
An additional div has been inserted before
<nav id="nav-categories-scroll">Subsequently, the JavaScript code was updated as displayed below:
$(document).scroll(function (e) {
var window_top = $(window).scrollTop();
var footer_top = $("#footer").offset().top;
var div_top = $('#sticky-anchor').offset().top;
... (JavaScript logic continued)
});