How to prevent jumping in bootstrap affix when window is narrow height?

Question

When search results is few than page height is narrow and affix sidebar is jumping when scrolling. I tryed to make min-height of main container greater then sidebar but it does not look nice. How to disable affix-bottom or work around to prevent jumping when window height is narrow?

Template presents my current application: jsfiddle

JS:

$('#sidebar').affix({});

HTML:

<div id="nav" class="navbar"></div>
<div id="content" class="container">
    <div class="row">
        <div class="col-sm-7 col-md-7 main"></div>
        <div class="col-sm-5 col-md-5">
            <div class="sidebar-fixed" data-spy="affix" data-offset-top="60" data-offset-bottom="50" id="sidebar"></div>
        </div>
    </div>
</div>
<footer class="container"></footer>

CSS:

body {
    position: relative;
}
.navbar {
    height: 60px;
    background-color: #dce7ed;
}
.main {
    background-color: #9fc8e3;
    height: 390px;
    margin-top: 60px;
}
#sidebar {
    background-color: #d5cbc6;
    height: 400px;
    margin-top: 60px;
}
#sidebar.affix-top {
    position: static;
}
#sidebar.affix {
    position: fixed;
    top: 20px;
    width: 283px;
}
#sidebar.affix-bottom {
    position: absolute;
    /* bottom: 50px; */
    top: auto;
    bottom: 50px;
}
footer {
    height: 50px;
    background-color: #dce7ed;
}

Do you mean when dimensions are changed you dont want it "jump" e radically and want it to be a smooth transition ? — JayD, Mar 11 '14 at 19:10
I would like to prevent jumping. I got the idea to reduce the height of sidebar when the window is too small. — roza, Mar 11 '14 at 19:18
Im not 100% sure but i think your asking for transitions on your media queries for a smooth effect. There is a good tutorial by CSS Tricks on this [Here](http://css-tricks.com/animated-media-queries/) I personally incorporated some transitions and animations on screen resize from another article by David Walsh. You can read it [Here](http://davidwalsh.name/animate-media-queries) — JayD, Mar 11 '14 at 19:21
May this is good idea to solve it. I'll check this solution. Thanks. — roza, Mar 11 '14 at 19:26
I tried to use @media(max-height: 400px) and this is bad solution. — roza, Mar 11 '14 at 23:23
Affix plugin can accept a function as an offset-top or offset-bottom. You'll need to set up the affix in js rather than with data attributes, but it makes for much better affix behavior. — calvin, Mar 22 '14 at 01:02

score 3 · Answer 1 · answered Mar 22 '14 at 01:08

Check if .main's height is big enough before setting up the affix.

JS

if ($(.main).first().innerHeight() > someNumber)
    $(#sidebar).affix({})

Then make sure you remove data-spy="affix" which auto inits affix.

<div class="sidebar-fixed" data-offset-top="60" data-offset-bottom="50" id="sidebar"></div>

avcajaraville · Answer 2 · 2014-03-18T14:16:46.270

1

Can you use JS ? Why not to read height of the elements and if the search results is smaller than the sidebar, then disable the affix ?

You can also add an event on window resize for re-check the sizes and enable / disable it as desired.

Hope it helps.

edited Mar 18 '14 at 14:16

answered Mar 16 '14 at 13:03

avcajaraville

9,041
2
28
37

I tried disable affix in resize event via '$(window).off('.affix')' and it brings the desired effect but I can't enable affix back. – roza Mar 18 '14 at 13:53
You have to research a bit for that then. Start with the official documentation and check how they do. I have no time now for help, sorry. – avcajaraville Mar 18 '14 at 14:23

score 1 · Answer 3 · answered Mar 21 '14 at 06:54

There's actually no need to over-complicate things with script that adds or removes the affix. In fact, since you already enabled the affix via markup, you don't need to do it by script again. Here's a simple fiddle I did to illustrate it: (you can ignore everything in script as those are for making the buttons work to toggle the main panel's height)

Simple template: http://jsfiddle.net/LYgam/8/

For your template, I tried removing the script and adding width to the original sidebar before the affix happens and it works fine for me:

#sidebar {
    background-color: #d5cbc6;
    height: 400px; width: 283px;
    margin-top: 60px;
}

Your template revised: http://jsfiddle.net/LYgam/9/

Though you might want to load the page in a separate window or make the preview pane in jsfiddle really large to see what's really going on without the responsive containers collapsing everything.

I lost on this problem a lot of time, but this does not look nice on [my website](http://www.notifyarea.com), where I placed google maps on sidebar. — roza, Mar 21 '14 at 08:17

score 0 · Answer 4 · edited Jul 05 '17 at 06:39

0

Try implementing this in your internal or external CSS file.

.affix + .container-fluid {
         padding-top: 0px;
         margin-top: 50px;
     }

Replace the margin-top with the height of your navbar. Hope this helps. Also, bear in mind that this is for container-fluid. If you would like this CSS to work on container classed div elements replace container-fluid with container.

edited Jul 05 '17 at 06:39

Chava Geldzahler

3,605
1
18
32

answered Jul 05 '17 at 00:34

Nick Glantz

1

How to prevent jumping in bootstrap affix when window is narrow height?

4 Answers4