CODEWITHSUNDEEP
javascriptcsstwitter-bootstrapaffix
Alexey Kosov
Alexey Kosov

Reputation: 3128

Twitter Bootstrap affix weird behavior

I'm trying to make a pinned menu in the left column, but the affix plugin works weird in my case: http://jsfiddle.net/AlexeyKosov/753ofx5x/ Try to scroll to bottom and back, when you're scrolling back, the menu jumps to top. What am I doing wrong?

HTML:

<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-3">
                <div class="panel panel-default menu">
                    <div class="list-group">
                        <a class="list-group-item" href="#">Item 1</a>
                        <a class="list-group-item" href="#">Item 2</a>
                        <a class="list-group-item" href="#">Item 3</a>
                        <a class="list-group-item" href="#">Item 4</a>
                    </div>
                </div>          
            </div>
            <div class="col-xs-9">
                <div class="content">
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        footer
    </div>
</body>

CSS:

body {
    padding-top: 20px;
}
.content {
    height: 1000px;
}
.footer {
    background: #eee; 
    height: 1000px;
}
.menu {
    width: 250px;
}

JS:

$(function() {
    $('.menu').affix({
        offset: {
            top: 100,
            bottom: 1000
        }
    });
});

Upvotes: 0

Views: 283

Answers (2)

Suganth G
Suganth G

Reputation: 5156

Just use affix:

avoid scripts

In bootstrap itself there is a inbuilt class called affix which consist of following css:

.affix {
    position: fixed;
    -webkit-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0px, 0px, 0px);
}

DEMO

HTML:

<div class="container">
        <div class="row">
            <div class="col-xs-3">
                <div class="panel panel-default menu affix">
                    <div class="list-group">
                        <a class="list-group-item" href="#">Item 1</a>
                        <a class="list-group-item" href="#">Item 2</a>
                        <a class="list-group-item" href="#">Item 3</a>
                        <a class="list-group-item" href="#">Item 4</a>
                    </div>
                </div>          
            </div>
            <div class="col-xs-9">
                <div class="content">
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        footer
    </div>

Upvotes: 2

Alexey Kosov
Alexey Kosov

Reputation: 3128

I just needed to add 

.affix-bottom {
    position: absolute;
}

Upvotes: 0

Related Questions