Making Fixed floating element scrolling smoothly in Firefox and Chrome

Question

I have a script that uses jQuery and CSS to position something at the top of the page when it scrolls. However, the bar looks like it's shaking when you scroll and it has been fixed to the top of the browser in Google Chrome and Mozilla Firefox. Why could this be?

I hope you can understand what I'm trying to describe. If not, copy and paste this code along with a jQuery library to see what I mean:

<style type='text/css'>
body {
    height:1000px;
    margin:0;
    padding:0;
}

#scroller {
    position:relative;
    top:60px;
    width:100%;
    background:#CCC;
    height:20px;
}
</style>

<script type='text/javascript'>
    $(window).load(function() {
        $(window).scroll(function() {
            if($(window).scrollTop()>60) {
              $('#scroller').css('top', $(window).scrollTop());
            }
        });
    });
</script>

<div id="scroller">Some controls</div>

Solution 1

Use this:

$(window).load(function(){
    $(window).scroll(function(){
        if($(window).scrollTop()>60){
            $('#scroller').css('position', 'fixed');
            $('#scroller').css('top', 0);
        } else {
            $('#scroller').css('position', 'relative');
            $('#scroller').css('top', 60);
        }
    });
});

http://jsfiddle.net/nwellcome/6PGZE/1/

Rather than manipulating the top all the time, once it's supposed to stay at the top set "position" to "fixed" and top to 0, that way it doesn't have to wait for the javascript scroll event to fire to fix the position.

Solution 2

There is also a jquery plugin that takes care of this. Here is a demo of a header that pushes a banner up out of view then stops at the top of the page. For your example, pretend the banner is not there.

Demo: http://jsfiddle.net/ZczEt/

Edit: Updated fiddle: http://jsfiddle.net/ZczEt/2180/

Usage:

$(document).ready(function() {
    $('.header').scrollToFixed();
});

The description of the plugin is as follows:

This plugin is used to fix elements to the top of the page, if the element would have scrolled out of view, vertically; however, it does allow the element to continue to move left or right with the horizontal scroll.

Given an option marginTop, the element will stop moving vertically upward once the vertical scroll has reached the target position; but, the element will still move horizontally as the page is scrolled left or right. Once the page has been scrolled back down past the target position, the element will be restored to its original position on the page.

This plugin has been tested in Firefox 3/4, Google Chrome 10/11, Safari 5, and Internet Explorer 8/9.

Plugin and source: https://github.com/bigspotteddog/ScrollToFixed

Comments

[Diodeus - James MacFarlane]

Callum, it's the page redraw rate that causes this and it will differ from browser-to-browser and machine-to-machine. The "fixed" technique gets around this by making it internal to the browser and not dependent on JavaScript. Good answer.