Sticky Sidebar That Only Sticks When Sidebar Bottom Is At Window Bottom

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 c

Solution 1:

I hope I got it right, when the bottom of the sidebar comes into the view, then stick?

I created another div at the bottom of the sidebar (inside the sidebar). When that comes into view, it sticks.

http://jsfiddle.net/Z9RJW/10/

<div class="moduleController"></div> //inside the sidebar

and in js

$(function () {


var headlineBarPos = $('.headlineBar').offset().top; // returns numbervar moduleControllerPos = $('.moduleController').offset().top; // returns number    var sidebarHeight = $('.sticky-sidebar-wrap').height();
var sidebarTop = $('.sticky-sidebar-wrap').offset().top;
var windowHeight = $(window).height();

var totalHeight = sidebarHeight + sidebarTop;

$(window).scroll(function () { // scroll event var windowTop = $(window).scrollTop(); // returns number// fixing the headline bar    if (headlineBarPos < windowTop) {
        $('.headlineBar').addClass('sticky').css('top', '0');
    } else {
        $('.headlineBar').removeClass('sticky').removeAttr('style');
    }

    if (moduleControllerPos < windowTop + windowHeight) {
        $('.sticky-sidebar-wrap').addClass('sticky').css('top', '0');
    } else {
$('.sticky-sidebar-wrap').removeClass('sticky').removeAttr('style');        }






    console.log(windowTop);

});


console.log(headlineBarPos);
console.log(sidebarHeight);
console.log(sidebarTop);

});

I hope it helps.

Solution 2:

Something like:

if (sidebar.top + sidebar.height < window.scrolltop + window.height) {
    // set sticky
}

and set sticky needs to take into account that the sidebar may be higher than the viewport, so:

sidebar.top = sidebar.height - window.height // this will be a negative number