滚动时将Div置于页面顶部

Question

I have a header on a website that is fixed 20px from the top of the page.

However, I want this to catch the top of the page when scrolling and become fixed to the top of the screen once the user has scrolled that 20px down.

CSS

#header{
    padding: 0px 0px 0px 0px;
    background: url(../images/header-fill2.jpg) repeat-x top;
    position: fixed;
    height: 60px;
    width: 100%;
    top: 20px;
    z-index: 5000;
}

I imagine some form of JavaScript is required but have little to no JavaScript experience, so any help would be greatly appreciated.

Answer 1

Just listen for the scroll event and read the value of $(window).scrollTop() and set the top according to that.
Something like:

$(window).on('scroll', function() {
    $('#header').css('top', $(window).scrollTop() > 20 ? '0px' : '20px');
});

Example on jsFiddle

Answer 2

The scroll event tells you when the window scrolls. Then, use the scrollTop to find out how much closer to 0 to go:

$(window).on("scroll", function() {
  $("#header").css("top", Math.max(0, 20 - $(window).scrollTop()));
});

Live Example

Or to avoid constantly re-creating objects:

(function() {
  var $wnd = $(window),
      $header = $("#header");
  $wnd.on("scroll", function() {
    $header.css("top", Math.max(0, 20 - $wnd.scrollTop()));
  });
})();

Live Example

Answer 3

Thats how I do that with jQuery. The position is also cached, for performance reasons:

Here is a fiddle:

http://jsfiddle.net/StephanWagner/u3yrS/

$(document).ready(function() {

    var cfixed_nav = false, wscroll;

    var setScroll = function() {
        wscroll = $(window).scrollTop();

        var fixed_nav = wscroll > 20; // Set pixel amount here

        if (fixed_nav != cfixed_nav) {
            $('body')[fixed_nav ? 'addClass' : 'removeClass']('fixed');
            cfixed_nav = fixed_nav;
        }
    };

    setScroll();
    $(document).scroll(setScroll);
});

With CSS you set the fixed position:

.fixed #header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%
}

Also remember, that when the header gets the fixed position, those 20px of the header are missing. So you can add a body padding for example:

.fixed {
    padding-top: 20px;
}

Or you add an element with 20 Pixel height and swap display none / block depending on the .fixed class in the body