Databases
StackOverflow2013
Postsdbo
POScrolling div, to fixed, to scroll again
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POScrolling div, to fixed, to scroll again
    text
    copied!<p>I have a page layout where a full width image is at the top, then on the right there is text content. On the left, there is a small scrolling div with social links in. </p> <p>It's like this: <a href="http://blog.teamtreehouse.com/building-a-jquery-sticky-sidebar-navigation-menu" rel="nofollow">http://blog.teamtreehouse.com/building-a-jquery-sticky-sidebar-navigation-menu</a> (social links scroll, then become fixed, then scrolls from another div).</p> <p>Here is an example, but without the final piece of the puzzle below: <a href="http://jsfiddle.net/nwFrg/" rel="nofollow">http://jsfiddle.net/nwFrg/</a></p> <pre><code> function sticky_relocate() { var window_top = jQuery(window).scrollTop(); var div_top = jQuery('#e-c-r-top').offset().top ; if (window_top &gt; div_top) jQuery('.socialbar-left').addClass('fixedsocialbar') else jQuery('.socialbar-left').removeClass('fixedsocialbar'); } // If you have jQuery directly, use the following line, instead jQuery(function() { // If you have jQuery via Google AJAX Libraries // google.setOnLoadCallback(function() { jQuery(window).scroll(sticky_relocate); sticky_relocate(); }); </code></pre> <p>When we get to the red footer, I want the 'hello box' to stop and stay there, aligned to bottom (until the person scrolls up again, then all should happen in reverse again.</p> <p>If someone can help tell me with the js to go from scrolling, to fixed (which is already in my example) and then a third trigger for bottom, i already know the css that will align it to bottom, just need the js trigger.</p> <p>I hope I've explained this OK.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload