CODEWITHSUNDEEP
csstwitter-bootstrap-3bootstrap-affix
trolik
trolik

Reputation: 43

Wrong behavior on Bootstrap 3 Affix

I want to add to my site based on Bootstrap 3 Affix feature for bottom navigation links. These links fixed on the bottom and added offset for the footer. But when I scroll to the footer I see the navigation do some small "jump".

All work as need, even if I toggle to a mobile panel in Google Chrome. But excluding real mobile devices. In any case, I tried on three Android devices.

I added a link to a short video from the phone screen for clarifying: https://i.sstatic.net/DSkt1.jpg.

Please see to the bottom of the screen.

CSS:

#nav_affix {
    left: 50%;
    margin-left: -70px;
    width: 140px;
    z-index: 99999;
}
.affix {
    position: fixed;
    bottom: 0;
}

#nav_affix.affix-bottom {
    position: absolute;
}
#nav_affix div.next {
    float: right;
}
#nav_affix div.prev {
    float: left;
}

#nav_affix div.next,
#nav_affix div.prev {
    width: 60px;
    height: 60px;
    border-radius: 10px;
}

JS:

$('#nav_affix').affix({
    offset: {
        bottom: $('.footer_wrap').outerHeight(true)
    }
});

Any ideas? Thx for any answer.

Best.

Upvotes: 0

Views: 33

Answers (1)

grkmsari
grkmsari

Reputation: 1

You should place footer in a wrapper with same height as footer. Thus, when footer placing its original position, it will not make a jump.

I have done this with dynamically but also static height will solve the problem.

$('#nav_affix').on('affix.bs.affix', function () {
    $('#footer-wrapper').height($('#nav_affix').outerHeight(true))
});

Upvotes: 0

Related Questions