CODEWITHSUNDEEP
javascriptcssposition
user1161939
user1161939

Reputation: 11

How to change CSS "position" on div when it reaches the end of container div?

I'm working on a feature for a website that creates a bar on the left side of a single post page that contains social share buttons. The bar follows the reader down the page as they scroll. It's similar to the one found on Mashable.com.

However, the bar will keep scrolling down the page into the footer area of the site, but I'd like for it to stop when it reaches the end of the container div (the main page content between header and footer).

I'm guessing JavaScript is involved that works on changing the "position:fixed" to "position:absolute" but I'm not sure what the exact code is.

Does anyone have thoughts/can help me out?

Upvotes: 1

Views: 832

Answers (2)

King Friday
King Friday

Reputation: 26086

jQuery plugin does this properly in staying within its container while keeping at the top when possible : https://github.com/sebringj/jquery.dumbfixed

 $('#middle .right').dumbFixed();

The selected item does some minor modifications to its parent such as setting min-width and min-height to its own dimensions because parent may have no dimensions set and will rely on its child to push it to its own dimensions.

Upvotes: 0

j08691
j08691

Reputation: 207943

Like this jsFiddle ?

The basic jQuery is:

var stickerTop = parseInt($('#sticker').offset().top);
$(window).scroll(function() {
    $("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? {
        position: 'fixed',
        top: '0px'
    } : {
        position: 'relative'
    });
});

Upvotes: 2

Related Questions