Блог

Я нашел несколько вопросов, похожих на этот, но они не смогли мне помочь. Когда я прокручиваю страницу вниз, заголовок / панель навигации не перемещается «плавно» вместе со страницей. После того, как я достигаю определенного уровня вниз по странице, заголовок «прыгает», но после этого все в порядке. У меня есть следующий код для фиксированного заголовка:

 $(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();
    }
 });
  

Мой CSS:

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

У меня нет position: fixed в моем CSS, потому что по какой-то причине он не работает, поэтому вместо этого я использовал jQuery для установки положения в фиксированное.

Я разместил остальную часть своей страницы на jsfiddle.net
http://jsfiddle.net/5n4pF / Если я не объяснил propelry, пожалуйста, спросите, и я постараюсь объяснить лучше 🙂
Заранее спасибо

РЕДАКТИРОВАТЬ Когда я достигаю 147 пикселей, он не должен прыгать. Это выглядит так, как будто он «скрывает и показывает». Вместо этого он должен плавно перемещаться при прокрутке страницы вниз.

Вы должны позиционировать свой заголовок абсолютно. и дайте новостям поле -увеличьте размер заголовка. Причина, по которой ваш position: fixed не работал, заключается в том, что вы исправили его внутри относительного элемента. Это исправляется внутри этого элемента (что не то, что вы хотите, потому что вы хотите, чтобы это было исправлено в верхней части страницы).

Он скачет из-за того, что вы меняете элемент со статического на фиксированный. Внезапно вы пропускаете около 53 пикселей высоты в вашем макете. Что заставляет его прыгать.

В этой скрипке:http://jsfiddle.net/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 amp; 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;
}
  

приведен правильный код. Все еще немного глючит с шириной чего-то. Но код в целом не очень аккуратный. Итак, я оставляю эту часть вам. Надеюсь, у вас это сработает.

Я работал над этим сегодня, и я нашел решение. Измените CSS с

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

Для

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