Allen Lantz Allen Lantz - 1 year ago 72
CSS Question

How do i change the header of my website when you scroll down?

I want so that when a user scrolls down the header changes its background and the header stays at the top of the window. I don't know if this needs javascript or you can do it in css.

The example of what i want it too look like is at

Answer Source

you can use this kind of code

<nav id="header_nav">nav here</nav>


body {
    height: 1000px;
    width: 100%;
    background-color: #F0F0F0;

#header_nav {
    width: 100%;
    height: 100px;
    background-color: #666;
    position: fixed;
    top: 0;
    left: 0;



    if($(document).scrollTop() > 0) {
        if($('#header_nav').data('size') == 'big') {
    else {
    if($('#header_nav').data('size') == 'small') {
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download