Bootstrap Affix Jumping About

Question

I want an image to stick to the right hand side whilst the page scroll and I have settled on bootstraps affix for this process

http://jsfiddle.net/7rhdLcz7/

$(function () {

    $('#image').affix({
        offset: {
            top: 200,
            bottom: 200
        }
    });
});

The only problem I have is the image is jumping to centre of the screen during the scroll then popping back in place at the bottom - is there a fix for this? Included is a link to jsfiddle of demonstration.

Answer 1

You are asking the image to be fixed in between 200px from the top and 200px from the bottom.

If you want the image to stick to bottom right play with #image css

for example:

JS

$(function () {
    $('#nav-wrapper').height($("#nav").height());

    $('#nav').affix({
        offset: {
            top: $('#nav').offset().top
        }
    });

    $('#image').affix({
        offset: {
            top: 200
        }
    });
});

CSS

#image {
    top:0;
    bottom: 200px;
    right:0;
}

#nav.affix {
    position: fixed;
    top: 0;
    width: 100%
}
#nav > .navbar-inner {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
}