CODEWITHSUNDEEP
jquerytwitter-bootstrap-3
alyus
alyus

Reputation: 997

Bootstrap Affix issue on small viewports

Using Bootstrap 3.1.1 and it's JavaScript component "affix". I've got it to work on large screen (works fine, no issues), but I've run into a problem where, when I view the site on a smaller screen size. When I scroll down the page, the affix element initially follows, but when I get to the end right before the footer, it resets back to the top and stops working. Not sure why.

HTML:

<div class="container">
    <div class="main-content"></div>
    <div class="sidebar my-affix"></div>
    <div class="footer"></div>
</div>

JS:

$('.my-affix').affix({
    offset: {
        top: 20,
        bottom: function() {
            return (this.bottom = $('.footer').outerHeight(true));
        }
    }
});

Upvotes: 1

Views: 208

Answers (1)

Jason
Jason

Reputation: 26

You must provide a style for .affix-bottom and set it to position: absolute otherwise offset will apply a position: relative to that element and make it "pop" to the top after you reach the bottom of the page and scroll up.

Ref: https://github.com/twbs/bootstrap/issues/9342#issuecomment-22819766

Upvotes: 1

Related Questions