Sticky Bootstrap column should end with parent/content

127
May 28, 2018, at 1:20 PM

I have seen various forms of this problem but nothing really helped me to solve the partial sticky sidebar/Bootstrap column behaviour. Let me start with the problem itself.

There is a big image close to the top of my page. Because of the page complexity, I am using Bootstrap column grid. The image spans over, let's say, 10 columns and I have left 2, belonging to the same row, on the left side to store a sidebar. This also allows me to vertically align the sidebar next to the image.

Now, the sidebar, what is now a Bootstrap column, should go sticky and should stay vertically aligned to the viewport once the scrollbar passes by. You can see in the fiddle that it kind of "jumps" instead of transitioning smoothly.

The other problem is that the sticky element/column should only remain sticky as long as its parent/container is visible. Which means that it should transition/be relative to the end of that container. Right now I have only managed to keep it sticky till the end of the page. It should stop above the red line (depicted in the fiddle).

Here is my jQuery logic so far.

$(document).ready(function(){
  $(window).scroll(function(){
    var elem = $("#refScroller").offset().top - ($("#refScroller").height() / 2);
    var windowvalue = $(window).scrollTop();
    if (elem <= windowvalue) {
      $("#wannabeSticky").addClass("sticky");
    }
    else {
      $("#wannabeSticky").removeClass("sticky");
    }
  });
});

I would really appreciate some ideas and hints as this has been bothering me for two days. I would love to keep the Bootstrap grid structure if possible, but feel free to give any suggestions, even those who depict the sidebar as a pure absolute div, as long as the sticky-ness works.

Thanks in advance!

EDIT: I know there is a similar problem already here, but it seems I can't make the JS logic work for my case.

READ ALSO
jQuery binds &#39;debugger&#39; event listener preventing another listener to launch

jQuery binds 'debugger' event listener preventing another listener to launch

There are two div with class hamburger-menu - one on static navbar, visible from the beginning and the second on a fixed navbar that becomes visible instead of static when scrolled down

124
Changing element CSS height with jQuery 2.3 vs. 3.3

Changing element CSS height with jQuery 2.3 vs. 3.3

I am trying to change the height of an element as a fixed ratio of its width with jQueryIt works with jQuery 2

117
Is there any way to backtrack the button which called a function using onclick property from that function in javascript

Is there any way to backtrack the button which called a function using onclick property from that function in javascript

I have been working recently on a project where I am adding rows to a table using AJAX , and one of the field is actually a button which will delete that row

127
How to apply on click action on images in javascript/jquery? [on hold]

How to apply on click action on images in javascript/jquery? [on hold]

I have a fiddle which I have replicated by seeing the screenshot below:

106