Twitter Bootstrap affix weird behavior

Question

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
        }
    });
});

Suganth G · Answer 1 · 2014-08-27T03:38:42.543

2

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>

edited Aug 27 '14 at 03:38

answered Aug 26 '14 at 13:48

Suganth G

5,136
3
25
44

You should explain a bit more. – Feign Aug 26 '14 at 13:50
I'm using Bootstrap affix, but call it from javascript rather than data attributes. Your example doesn't handle the footer. – Alexey Kosov Aug 26 '14 at 14:14
1

From what your question asks, this does exactly that... Remove your JS and it will work... – Feign Aug 26 '14 at 14:20
I removed js but it still doesn't work. I guess you don't understand what the problem is. Do you see gray footer in my example? The menu must not overlap it. – Alexey Kosov Aug 26 '14 at 14:26
It will overlaps see the DEMO given – Suganth G Aug 27 '14 at 03:33

score 0 · Answer 2 · answered Aug 26 '14 at 14:48

0

I just needed to add

.affix-bottom {
    position: absolute;
}

answered Aug 26 '14 at 14:48

Alexey Kosov

3,010
2
23
32

Twitter Bootstrap affix weird behavior

2 Answers2

DEMO