Как создать заголовок, который изменяется при прокрутке страницы?

Я хочу создать панель навигации, которая изменяется по мере прокрутки страницы, аналогичной той, что у них есть на techcrunch.com

Я не только хочу сделать липкий заголовок, который остается на вершине, я знаю, как это сделать в CSS. Но я также хочу изменить его высоту и стиль объектов, вложенных в него после прокрутки до определенной точки.

Я уже провел некоторое исследование, и большинство людей говорят, что это должно быть сделано с помощью функции .scroll или что-то в этом в jQuery, но я не нашел полного объяснения того, как это сделать. Я не очень хорошо знаком с jQuery или Javascript.

Все ответы, которые я нашел для похожих вопросов, не позволят мне редактировать или изменять вложенный контент в заголовке, только изменить стиль самого заголовка. Я был бы признателен, если бы кто-нибудь мог объяснить мне процесс в некоторых деталях. Я действительно хочу узнать, как это сделать, а не просто копировать код и вставлять его на мой сайт.

Ответы

Ответ 1

Вот общее решение.

Это связано с наличием нескольких заголовков (которые могут иметь совершенно другой контент внутри), из которого вы выборочно отображаете один в зависимости от положения прокрутки. Каждый элемент заголовка будет иметь атрибут data-visible-range, который определяет позиции прокрутки min и max, когда он должен отображаться.

Демо: http://jsfiddle.net/cydfh2s6/1/

HTML

<div class="header header-1" data-visible-range="0-100">Header 1</div>
<div class="header header-2" data-visible-range="101-500">Header 2</div>
<div class="header header-3" data-visible-range="501-">Header 3</div>
<div class="body">BODY</div>

CSS

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: none;
}
.header-1 {
    background-color: yellow;
    display: block; /* header 1 is visible by default */
}
.header-2 {
    background-color: red;
}
.header-3 {
    background-color: green;
}
.body {
    padding-top: 50px;
    height: 2000px;   
}

JS

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    var headerToDisplay = false;
    $('.header[data-visible-range]').each(function() {
        var range = $(this).data('visible-range').split('-');
        range[0] = range[0] ? parseInt(range[0], 10) : 0;
        range[1] = range[1] ? parseInt(range[1], 10) : $(document).height();
        if(scrollTop >= range[0] && scrollTop <= range[1]) {
            headerToDisplay = $(this);
            return false;
        }
    });
    if(headerToDisplay && !headerToDisplay.is(':visible')) {
        $('.header[data-visible-range]').hide();
        headerToDisplay.show();
    }
});

Ответ 2

В этом примере я добавляю класс в прокрутку

Смотрите этот пример: http://jsfiddle.net/kevalbhatt18/twn3gs75/

слышать, что мы можем прослушивать событие прокрутки, например щелчок, поэтому, когда вы прокручиваете его войдет в $(window).scroll(function() { ----Call---- }); Теперь в этом function() {} проверит, сколько будет прокручиваться 1 или 2 или 3... и т.д. поэтому в зависимости от того, что будет применяться условие в моем коде, я проверил, если пользователь прокрутил > 1, затем применил css.

$(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});