I have found a few questions similar to this, but were unable to help me. When I scroll down the page the header/navigation bar doesn't move "smoothly" with the page. After I reach a certain amount down the page, the header "jumps", but after that it's fine. I have the following code for a fixed header:

$(window).scroll(function(){
    if ($(window).scrollTop() >= 147) {
    $("#top_nav").addClass("fixed");
    $("#top_nav").css("position", "fixed");
    $("#top_rule").hide();
    $("#bottom_rule").hide();
    } 
    else {
    $("#top_nav").removeClass("fixed");
    $("#top_nav").css("position", "initial");
    $("#top_rule").show();
    $("#bottom_rule").show();
    }
 });

My CSS:

.fixed {
    width: 100%;
    background: white;
    border-bottom: 1px solid black;
    box-shadow: 0 0 20px #000000;
    top: 0px;
    padding-top: 15px;
    padding: 10px;
}

I don't have a position: fixed in my CSS, because for some reason it isn't working, so instead I used jQuery to set the position to fixed.

I have posted the rest of my page on jsfiddle
/ If I did not explain propelry, please ask and I'll try and explain better :)
Thanks in advance

EDIT When I reach 147px, it must not jump. It looks as if it "hides and shows". Instead it must move smoothly as you scroll down the page.

I have found a few questions similar to this, but were unable to help me. When I scroll down the page the header/navigation bar doesn't move "smoothly" with the page. After I reach a certain amount down the page, the header "jumps", but after that it's fine. I have the following code for a fixed header:

$(window).scroll(function(){
    if ($(window).scrollTop() >= 147) {
    $("#top_nav").addClass("fixed");
    $("#top_nav").css("position", "fixed");
    $("#top_rule").hide();
    $("#bottom_rule").hide();
    } 
    else {
    $("#top_nav").removeClass("fixed");
    $("#top_nav").css("position", "initial");
    $("#top_rule").show();
    $("#bottom_rule").show();
    }
 });

My CSS:

.fixed {
    width: 100%;
    background: white;
    border-bottom: 1px solid black;
    box-shadow: 0 0 20px #000000;
    top: 0px;
    padding-top: 15px;
    padding: 10px;
}

I don't have a position: fixed in my CSS, because for some reason it isn't working, so instead I used jQuery to set the position to fixed.

I have posted the rest of my page on jsfiddle
http://jsfiddle/5n4pF/ If I did not explain propelry, please ask and I'll try and explain better :)
Thanks in advance

EDIT When I reach 147px, it must not jump. It looks as if it "hides and shows". Instead it must move smoothly as you scroll down the page.

• javascript
• jquery
• html
• css

2 Answers 2

You should position your header absolute. and give the news a margin-top the size of the header. The reason why your position: fixed wasn't working is because you fixed it inside of a relative element. It get's fixed inside of that element (which isn't what you want, because you want it fixed on top of the page).

It jumps because of the fact that you change the element from static to fixed. All of a sudden you miss about 53 pixels of height in your layout . Which makes it jump.

In this fiddle: http://jsfiddle/5n4pF/3/

* {
    margin: 0px;
    padding: 0px;
}

header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

#black_top {
    background: black;
    font-size: 5px;
    display:block;
    width: 100%;
    height: 5px;
}

#logo_header {
    margin-top: 20px;
}

.list_item {
    list-style-type: none;
    display: inline-block;
    font: 16px Arial;
    padding: 10px 30px 10px 30px;
    text-align: center;
}

#top_nav {
    font: Arial 30px;
    display: block;
     width: 100%;
}

.nav_links {
    text-decoration: none;
    color: black;
}

hr {
    margin-right: 30px;
    margin-left: 30px;
    color: #f00;
    opacity: 0.3;
}

.nav_bullets {
    color: #D6D6D6;
}

::-moz-selection {
    background: #93E6E5;
}

::selection {
    background: #b3d4fc;
}

#news_block {
    /*Chrome & Safari*/
    -webkit-column-count: 3;
    -webkit-column-gap: 40px;
    /*Firefox*/
    -moz-column-count:3;
    -moz-column-gap: 40px;
    margin: 20px;
    position: absolute;
    top: 249px;
    width: 100%;
    box-sizing: border-box;
}

#search_field {
    font-size: 25px;
}

.fixed {
    width: 100%;
    box-sizing: border-box;
    background: white;
    border-bottom: 1px solid black;
    box-shadow: 0 0 20px #000000;
    top: 0;
    position: fixed;
    padding-top: 15px;
    padding: 10px;
}

the correct code is given. It's still a bit buggy with widths of something. But the code in general is not very tidy. So I'll leave that part to you. Hope this works for you.

I was working on it today, and I found the solution. Change the CSS from

.fixed-header .main-header {
    display: none;
}

to

.fixed-header .main-header {
    display: inline;
}