how use sticky sidebar move up when window scroll top

Question

Sticky Sidebar that only sticks when sidebar bottom is at window bottom i get this site ( got to bootstrap sticky example)

javascript

$(function() {
    var win = $(window);
    var doc = $(document);
    var wh = win.height();
    var dh = doc.height();
    var sidebar = $('.rightside .stickybar');
    var sot = sidebar.offset().top;
    var sh = sidebar.height();
    var elementToBottom = dh - sot - sh;
    // reset the sidebar width
     var wt = sidebar.width();
     sidebar.width(wt);
    win.scroll(function(){
    var dst = doc.scrollTop();
    var scrollBottom = dh - dst - wh;
   if(scrollBottom <= elementToBottom) {
      sidebar.addClass('fixToBottom');
  } else {
     sidebar.removeClass('fixToBottom');
    }
   });
});

css

 .fixToTop {
   position: fixed;
   top: 50px;
  }
 .fixToBottom {
    bottom: 60px;
    position: fixed;
 }

html

   <header> </header>
     <div class="contents">
        <div class = "leftside"> left</div>
            < div class="righside">
           <div class="stickybar">
              // when move scrolling up and down 
            </div>
         </div> 
       </div>
      <footer> footer </div>

I have a 2 column layout. The left column is way longer than the sidebar. I want the sidebar only to stick when its bottom reaches the bottom of the browser window. So the user can continue to scroll down the left column content while the right sidebar sticks. I've seen a lot of sticky questions here, however this particular situation still stumps me. I also have a sticking headline bar on the left column that i've successfully gotten to stick.

Kevin Leegsma Kevin Leegsma · Accepted Answer · 2015-02-11T04:46:46

Check out this example, I whipped up.

http://www.bootply.com/hVx29SmQ4g

If you or anyone has any questions, just send me a message and I'll try to explain. I commented the code however, so it should be quite straightforward. I hope its what you needed though!

:::CODE:::

/*
===  JS  ===
============
Author:  Kevin Leegsma
Updated: Feb 10, 2015
Notes:   Coded for Stack Overflow - re: Sticky Sidebar
*/

/* Base function that waits till rest of site loads and then executes */
$(document).ready(function () {
    "use strict";

    /* activate sidebar, this can also be done as in-line HTML using the following line, instead of the Javascript below */
    /*  <div class = "col-xs-4" id = "rightColumn" data-spy = "affix" data-offset-bottom = "200">  */
    $('#sidebar').affix({
        offset: {
            top: 400  /* both TOP and BOTTOM can be used here, tweek to your own needs */
        }
    });

    /*This function gets the WIDTH of the wrapper and maintains it for the SIDEBAR*/
    /*It does this by setting the WRAPPER as the PARENT, it then calls a function to resize the child (SIDEBAR) 
    in this case equal to the parent size.*/
        /*NOTE: Without this function, the AFFIX still works, just doesn't function as nicely as it doesn't follow
        standard Bootstrap grid CSS rules.  */
    $('#sidebar').each(function () {
        var elem = $(this);
        var parentWrapper = $('#sidebarWrapper');
        var childToParentResize = function () {
            var sidebarWidth = $(parentWrapper).width();
            elem.width(sidebarWidth);
        };      
        childToParentResize();
        $(window).resize(childToParentResize);
    });

    /* Alert to inform you the SIDEBAR has become fixed, can be removed/commented, just for testing, but helpful for those new to AFFIX */  
    $('#sidebar').on('affixed.bs.affix', function(){
        alert("The left navigation menu has been affixed. Now it doesn't scroll with the page.");
    });
});



/* CSS used here will be applied after bootstrap.css
===  CSS  ===
=============
Author:  Kevin Leegsma
Updated: Feb 10, 2015
Notes:   Coded for Stack Overflow - re: Sticky Sidebar

--------------------------------------
Layout
-------------------------------------- */
/* Targets the SIDEBAR once the affix has become active */
/* Adjust these to cater to your layout settings */ 
#sidebar.affix{
    top: 10px;
    right: 8.5%;
}



/*
==============
===  HTML  ===
==============
Author:  Kevin Leegsma
Updated: February 10, 2015
Notes:   Coded for Stack Overflow - re: how-use-sticky-sidebar-move-up-when-window-scroll-top
*/
<!-- Main Code -->
<div class="container" id="main">
  <!-- Left column with dummy text -->
  <div class="col-xs-8" id="leftColumn">
    <h1> LEFT COLUMN</h1>
    <h3>With Even More Filler Text!</h3>
    <p>...a bunch of text...</p>
  </div><!--end leftColumn-->

  <!-- Right column/sidebar that affixes itself as the window is scrolled -->
  <!-- Stuck within a col-xs-4 parent element, this is because the AFFIX 
has wonky width controls, they ignore Bootstrap grids and aren't responsive
with this wrapper and the JS however, it resizes well. --> 
  <div class="col-xs-4" id="sidebarWrapper">
    <div id="sidebar" data-spy="affix">
      <h1> SIDEBAR</h1>
      <h3>With Filler!</h3>
      <small>
        <p>...sidebar text/links...</p>
      </small>
    </div><!--end sidebar-->
  </div><!--end sidebarWrapper-->
</div><!--end container-->

how use sticky sidebar move up when window scroll top

2 Answers