CODEWITHSUNDEEP
javascriptjqueryhtmlcss
vpv
vpv

Reputation: 938

How can I make my sticky sidebar to scroll up when page scroll reaches the footer?

This a frequently asked question on StackOverFlow, but the answers I found here are not solving my problem completely. To get a idea of my problem, please browse this fiddle which I found here. My problem is, I am not able to apply this solution as my html structure is different as below:

My HTML section:

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

        <section class="back-to-help-centre sm-pt-20 sm-pb-20 xs-pt-10 xs-pb-10">
            <div class="container-fluid left-container-padding right-container-padding">
                <div class="row">
                    <div class="col-xs-12 text-left cursor-hand">
                        <a href="/helpcentre">
                            <span class="glyphicon glyphicon-arrow-left"></span>
                            <h5>Back to Help Centre</h5>
                        </a>
                    </div>
                </div>
            </div>
        </section>

        <section class="myfaq">
            <div class="container-fluid">
                <div class="row nav-categories-row same-height-columns">
                    <div class="col-sm-3 left-container-padding white-col-background hidden-xs">
                        <div class="faq-categories">
                            <h3>Sidebar header</h3>

                            <nav id="nav-categories-scroll">
                                <ul class="nav nav-pills nav-stacked nav-categories fixed">
                                    <li class="faq-item"><a href="#sectionA">sectionA link</a></li>
                                    <li class="faq-item"><a href="#sectionB">sectionB link</a></li>
                                    <li class="faq-item"><a href="#sectionC">sectionC link</a></li>
                                    <li class="faq-item"><a href="#sectionD">sectionD link</a></li>
                                    <li class="faq-item"><a href="#sectionE">sectionE link</a></li>
                                    <li class="faq-item"><a href="#sectionF">sectionF link</a></li>
                                    <li class="faq-item"><a href="#sectionG">sectionG link</a></li>
                                    <li class="faq-item active"><a href="#sectionH">sectionH link</a></li>
                                    <li class="faq-item"><a href="#sectionI">sectionI link</a></li>

                                </ul>
                            </nav>
                        </div>
                    </div>

                    <div class="col-sm-9 right-container-padding grey-col-background col-xs-12 faq">
                        <div id="sectionA">content</div>
                        <div id="sectionB">content</div>
                        <div id="sectionC">content</div>
                        <div id="sectionD">content</div>
                        <div id="sectionE">content</div>
                        <div id="sectionF">content</div>
                        <div id="sectionG">content</div>
                        <div id="sectionH">content</div>
                        <div id="sectionI">content</div>
                        <div class="faq-disclaimer">
                            <span class="disclaimer-title">Disclaimer:</span><span class="disclaimer-text">disclaimer-text</span>
                        </div>
                    </div>
                </div>
            </div>
        </section>



$(document).scroll(function (e) {

    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $(".nav-categories").height();
    var startScrollPos = $("#nav-categories-scroll").offset().top;
    var currentScroll = $(this).scrollTop();
    var padding = 20;  // tweak here or get from margins etc
    var scrollTopThreshold = 348;

    if (window_top + div_height > footer_top - padding) {
        if (currentScroll <= scrollTopThreshold) {
            $(".nav-categories").css({ top: -10 });
        } else {
            $(".nav-categories").css({ top: (window_top + div_height - footer_top + padding) * -1 });
        }
    } else if (window_top > div_top) {
        $(".nav-categories").addClass('fixed');
    } else {
        $(".nav-categories").css({ top: 0 });
        $(".nav-categories").removeClass('fixed');
    }
});

    </div>
    <footer class="md-pt-30 md-pb-30" id="footer">
        <div class="container hidden-xs">
            <div class="row">
                <div class="col-sm-3 col-xs-12">
                    <h4>INFORMATION</h4>
                    <ul class="list-unstyled">
                        <li><a href="/contact-us">Contact Us</a></li>
                        <li><a href="/terms-of-use" target="_blank">Terms of Use</a></li>
                        <li><a href="/privacy-policy" target="_blank">Privacy Policy</a></li>
                        <li><a href="/faq">FAQs</a></li>
                        <li><a href="/login">Login</a></li>
                    </ul>
                </div>
            </div>

            <div class="row">
                <div class="col-xs-12">
                    <hr>
                    <div class="legal">All Rights Reserved.</div>
                </div>
            </div>
        </div>
    </footer>
</div>

My sticky sidebar disappears when the page scroll reaches the footer (which matches this fiddle from the above link). How can I make it scroll up with the page when the footer is reached? This is an existing solution using Umbraco so I can't change the page html structure and I am not an css expert to figure this out of my own. Below is the css:

When the sidebar is visible and sticky

.mycssclass .nav-categories.fixed {
    position: fixed;
    top: 0;
}
.mycssclass .nav-categories {
    margin-top: 20px;
    width: 100%;
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
ol, ul {
    margin-top: 0;
    margin-bottom: 10px;
}

When the sidebar gets hidden after scrollbar reaches page footer

.mycssclass .nav-categories {
    margin-top: 20px;
    position: relative;
    width: 100%;
}
.nav {
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}
ol, ul {
    margin-top: 0;
    margin-bottom: 10px;
}

Note: The content sections (A to I) are dynamically generated and can increase in future.

SOLUTION
Below div is added before <nav id="nav-categories-scroll">

And then the javascript code was updated as below

$(document).scroll(function (e) {

    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $(".nav-categories").height();
    var startScrollPos = $("#nav-categories-scroll").offset().top;
    var currentScroll = $(this).scrollTop();
    var padding = 20;  // tweak here or get from margins etc
    var scrollTopThreshold = 348;

    if (window_top + div_height > footer_top - padding) {
        if (currentScroll <= scrollTopThreshold) {
            $(".nav-categories").css({ top: -10 });
        } else {
            $(".nav-categories").css({ top: (window_top + div_height - footer_top + padding) * -1 });
        }
    } else if (window_top > div_top) {
        $(".nav-categories").addClass('fixed');
    } else {
        $(".nav-categories").css({ top: 0 });
        $(".nav-categories").removeClass('fixed');
    }
});

Upvotes: 1

Views: 125

Answers (1)

Hai Pham
Hai Pham

Reputation: 2225

Here is my solution: set #sticky to absolute when it reach footer

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var footer_top = $("#footer").offset().top;
    var div_top = $('#sticky-anchor').offset().top;
    var div_height = $("#sticky").height();
    
    if (window_top + div_height > footer_top) {
    
        $('#sticky').removeClass('stick');   
        $('#sticky').addClass('absolute');
    } 
    else if (window_top > div_top) {
        $('#sticky').removeClass('absolute');
        $('#sticky').addClass('stick');
    } else {
        $('#sticky').removeClass('stick');
        $('#sticky').removeClass('absolute');
    }
}

$(function () {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});
#sticky {
    padding: 0.5ex;
    width: 200px;
    height:300px;
    background-color: #333;
    color: #fff;
    font-size: 2em;
    border-radius: 0.5ex;
    float:left;
}
#sticky.stick {
    position: fixed;
    top: 0;
    z-index: 10;
    border-radius: 0 0 0.5em 0.5em;
}
.content-holder {
  margin-left:225px;
}
.absolute {
  position: absolute;
  bottom: 600px;
}
body {
    margin: 1em;
    position: relative
}
p {
    margin: 1em auto;
}
#footer {
  width:100%;
  height:600px;
  background:#ccc;
  z-index:999999
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Made for my post: <a href="http://blog.yjl.im/2010/01/stick-div-at-top-after-scrolling.html">Stick div at top after scrolling</a>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque,
    lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh
    lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus.
    Maecenas lacinia bibendum accumsan. Curabitur lobortis convallis purus
    non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat.
    Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan
    ullamcorper lorem id porttitor. Aliquam vitae libero eget magna mollis
    gravida.</p>
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<div class="content-holder">
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
    tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
    justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
    arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
    orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
    sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
    neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
    mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
    quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
    tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
    accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
    ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
    Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
    Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
    molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
    porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
    nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
    Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
    tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
    velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
    imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
    Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
    id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
    ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
    Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
    enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
    tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
    justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
    arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
    orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
    sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
    neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
    mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
    quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
    tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
    accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
    ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
    Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
    Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
    molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
    porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
    nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
    Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
    tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
    velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
    imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
    Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
    id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
    ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
    Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
    enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas
    tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor,
    justo at ornare bibendum, magna lectus cursus felis, tristique consectetur
    arcu justo at augue. Mauris ultrices mollis sem eget elementum. Sed ipsum
    orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant
    morbi tristique senectus et netus et malesuada fames ac turpis egestas.
    Duis aliquam pulvinar nisl, vitae congue velit ultricies eget.</p>
<p>Maecenas mollis arcu orci. Nam nec velit dolor, ut convallis augue. Morbi
    sed massa nunc. Vestibulum malesuada eros sed purus volutpat nec bibendum
    neque sodales. Nullam tincidunt quam sit amet lacus egestas vitae ultrices
    mauris porta. Duis vel neque ipsum. Vestibulum eu blandit ante. Lorem ipsum
    dolor sit amet, consectetur adipiscing elit. Donec turpis leo, hendrerit
    quis elementum tincidunt, auctor ac augue. Pellentesque habitant morbi
    tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Sed in eleifend magna. Morbi faucibus eleifend nunc eu sagittis. Curabitur
    accumsan nulla in neque tempor eu lacinia elit consectetur. Nullam scelerisque
    ligula vitae nisi interdum pellentesque. Vivamus lobortis tempor pulvinar.
    Nunc sit amet nulla urna. Phasellus malesuada euismod lectus nec bibendum.
    Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse
    molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna
    porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris
    nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris.
    Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus
    tempor accumsan urna eu faucibus. Duis sed ligula neque, pulvinar euismod
    velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales
    imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan.
    Pellentesque accumsan pulvinar odio, id adipiscing diam mollis eu. Nulla
    id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque
    ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero.
    Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci
    enim egestas arcu, sit amet sodales risus leo quis nisi.</p>
    </div>
    <div id="footer">
    Footer here.
    </div>

Upvotes: 2

Related Questions