Issue with keeping a div class floating down with the page

I've been trying a few things but cannot get it to work. I have a div in the right column and I want it to float down to a certain point with the page while scrolling.

<div class="stickyDiv">
 <div class="section mod-sticky" style="position: fixed; top: 70px;">
 <p>Always float with page</p>
 </div>
 </div>

Is there any easy way to do this with jQuery? Or just css?

made a quick jsfiddle what I want is that as soon as it reaches class contentb it will scroll with the page

https://jsfiddle.net/agwrbjh8/1/

thanks

Answers 1

  • I would look at the sticky-kit jQuery plugin.

    And you would use it as so:

    $('.stickyDiv').stick_in_parent({
        parent: $('.content'),
        offset_top: 70
    });
    

    JSFIDDLE DEMO

    Had to restructure your HTML so that .stickyDiv is a child of the content div you intend to stick within, and then also added a margin-left to get it to the right of the content area. Might not work for your situation but I don't see how you can get it to stick how you want with your original markup.


Related Articles