Bootstrap 4滚动到长粘性侧栏的底部

Question

I'm trying to achieve Facebook like right side navigation. When the sidebar content is taller than the viewport, If you scroll down the sidebar should be scrolled to the very bottom before it's stick to the screen.

JSFiddle

    <div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="header">
                Header
            </div>
        </div>


        <div class="col-md-9 col-sm-9 col-xs-9">
          <div class="main-content">
              Main Content
          </div>
        </div>

        <div class="col-md-3 col-sm-3 col-xs-3">
            <div class="sidebar-right sticky-top">
                Sidebar Content

                <div class="content-bottom">
                      Content
                </div>
            </div>
        </div>

        <div class="col-md-12">
            <div class="footer">
                Footer
            </div>
        </div>
    </div>
</div>

Answer 1

I've come up with a solution to the problem using jQuery to make the sidebar sticky to a negative position based on the viewport and the sidebar's height ( fiddle here ):

 function setPosition() { $(".sidebar-right").css({ 'position': 'sticky', 'top': window.innerHeight - $(".sidebar-right").innerHeight() }); } // Set initial positioin setPosition(); // Adjust position when window is resized $(window).resize(setPosition); 

 .header { width: 100%; background-color: green; text-align: center; padding: 15px 20px; color: #fff; } .sidebar-left { background-color: purple; color: #fff; padding: 15px; height: 500px; } .sidebar-right { background-color: purple; color: #fff; padding: 15px; height: 500px; } .main-content { background-color: red; height: 900px; color: #fff; padding: 15px; } .footer { width: 100%; background-color: green; text-align: center; padding: 15px 20px; color: #fff; } .content-bottom { position: absolute; bottom: 0; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="header"> Header </div> </div> <div class="col-md-9 col-sm-9 col-xs-9"> <div class="main-content"> Main Content </div> </div> <div class="col-md-3 col-sm-3 col-xs-3 sb"> <div class="sidebar-right"> Sidebar Content <div class="content-bottom"> Content </div> </div> </div> <div class="col-md-12"> <div class="footer"> Footer </div> </div> </div> </div> 

If you don't want to use jQuery, you can add the sticky-top class to the element at bottom of your sidebar (it won't look quite right). Fiddle here (resize the window so the text at the sidebar is longer than the window height).

 .header { width: 100%; background-color: green; text-align: center; padding: 15px 20px; color: #fff; } .sidebar-left { background-color: purple; color: #fff; padding: 15px; height: 500px; } .sidebar-right { background-color: purple; color: #fff; padding: 15px; height: 100%; } .main-content { background-color: red; height: 900px; color: #fff; padding: 15px; } .footer { width: 100%; background-color: green; text-align: center; padding: 15px 20px; color: #fff; } .content-bottom { position: absolute; bottom: 0; } 

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <div class="header"> Header </div> </div> <div class="col-md-9 col-sm-9 col-xs-9"> <div class="main-content"> Main Content </div> </div> <div class="col-md-3 col-sm-3 col-xs-3"> <div class="sidebar-right"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer quis turpis enim. Sed non lacinia lacus. <div class="sticky-top"> Curabitur lorem lorem, efficitur sit amet ex non, viverra porttitor odio. </div> </div> </div> <div class="col-md-12"> <div class="footer"> Footer </div> </div> </div> </div>