0

I have an object at the top of the page which I would like to lock to the top of the window when the user scrolls to a certain point. I have this so far which works ok but it is a bit jumpy. What I mean by jumpy is it doesn't move till the user scrolls so far then it jumps to the point I want to lock the object at. And when I'm scrolling the div appears to jump up and down every time the scroll bar is moved.

This is what I have so far:

$(window).scroll(function () {
    if ($(window).scrollTop() > 165) {
        $('#nav_bar').css('top', parseInt($(window).scrollTop() - 165));
    }else{
        $('#nav_bar').css('top', parseInt($(window).scrollTop()));
    }
}
);



.nav{
    position:relative;
    height:25px;
    width:750px;
    margin-top:165px;
    margin-left:auto;
    margin-right:auto;
    display:block;
    text-align:center;
}
.nav div{
    display:inline-block;
    height:25px;
}
.nav div div{
    float:left;
    height:25px;
    text-align:center;
    display:table-cell;
    vertical-align:bottom;
    width:auto;
    margin-left:10px;
    margin-right:10px;
    padding-left:5px;
    padding-right:5px;
    line-height:25px;
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    color:rgba(11,108,138,1.00);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

This is the first time I have done this so I'm sure if I can help the jumping when every time the page is scrolled but I have seen this on other sites that works really smoothly. However I do understand that the div (head) should scroll with the page until it reaches that point and then stop completely at the top of the page.

Paul Ledger
  • 1,125
  • 4
  • 21
  • 46
  • Heres a fiddle http://jsfiddle.net/rD497/ – Paul Ledger Jun 05 '14 at 14:11
  • 1
    Like @Bart said... css `position: fixed` gives you absolute positioning that doesn't move with the scroll. Give up this javascript madness... it will look awful on IOS because scroll events only happen when the scroll is finished. You get **nothing** for the entire duration of the scroll. – spender Jun 05 '14 at 14:12

1 Answers1

1

Headroom.js

This plugin handles these situations and it works. I suggest that you try it out. It is open source so you could also contribute to it if you find any issues while implementing it.

In case you don't want to use headroom.js, I would just create another div with equal height to the div you are fixing except I would add "display: none" as a CSS rule to it. Then, in your JS logic you can display it when you fix the nav and hide it again when you unfix the nav.

Or you could just add a padding to the parent element equal to the height of the fixed nav.

        if (viewport.scrollTop() > 148) {
            header.css('position', 'fixed').addClass('compressed');
            section.css('padding-top', 148);
        } else {
            header.css('position', 'relative').removeClass('compressed');
            section.css('padding-top', 0);
        }

where "header", "section" and "viewport" are variables that should define with $('').

Let me know if you need anything else.

Elemenofi
  • 374
  • 5
  • 18