javascript - fixed header jumps after scrolling down the page - Stack Overflow

admin管理员组

文章数量:1026989

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

Share Improve this question Follow edited Jul 5, 2014 at 12:20 asked Jul 5, 2014 at 12:02 user2556381user2556381

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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;
}

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

Share Improve this question Follow edited Jul 5, 2014 at 12:20 asked Jul 5, 2014 at 12:02 user2556381user2556381

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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;
}

本文标签： javascriptfixed header jumps after scrolling down the pageStack Overflow