Исправить заголовок сверху, когда раздел виден

Я пытаюсь создать эффект, чем когда мой пользователь прокручивает, мой h1 придерживается вершины окна. Когда родительский div прокручивается мимо h1, он затем "освобождается" и снова прокручивается, как обычно. Когда мой следующий section появится, я хотел бы снова добавить следующий h1 в начало и так далее.

Fiddle

JQuery

$(document).ready(function(){
    $(window).scroll(function(){
        $('section h1').addClass('fixed');
    })
})

Я также пробовал:

var section = $('section');
distance = section.offset().top,
$window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
       section.find('h1').addClass('fixed');
    }
});

Ответ 1

Вы можете сделать это, используя немного jQuery.

Следующий фрагмент вычисляет смещение каждого раздела в верхней части окна. Когда раздел попадает в верхнюю часть окна, позиция title <h1> изменяется на position:fixed;.

DEMO

JQuery

function fixTitle() {
    $('section.affix').each(function () {
        var $this = $(this);
        var offset = $this.offset().top-40;
        var scrollTop = $(window).scrollTop();

        if (scrollTop > offset) {
            $this.addClass('fixed');
        } else {
            $this.removeClass('fixed');
        }
    });
}

$(document).ready(function () {
    $(window).scroll(fixTitle);
});

CSS

section {
    overflow:hidden;
    padding:0 20%;
    position:relative;
  text-align:justify;
}
section h1 {
    float:left;
    width:14%;
  padding-left:1.5%;
  line-height:40px;
    background:#fff;
    position:relative;
  z-index:1;
}
section .summary {
    float:right;
    width:70%;
}
.fixed h1:first-child {
    position:fixed;
    top:0;
}
h1:first-child:before{
  content:"";
  position:absolute;
  left:0;
  width:5%;
  height:100%;
  background-color:#4381B6;
  z-index:-1;


}
.fixed h1:first-child:before{
  width:100%;
  -webkit-transition:width 0.5s ease-in-out;
  transition: width 0.5s ease-in-out;
}

Ответ 2

Вы можете решить это с помощью CSS3 в некоторых из последних браузеров, используя

.sticky {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 15px;
}

Смотрите это демо (или это демо с polyfill в браузерах, которые не поддерживают позицию: липкий) и соответствующую статью чтобы узнать больше. Я бы предложил использовать эту технику, поскольку она работает без каких-либо проблем (даже на мобильных устройствах) и надежной polyfill для более старого браузера уже доступна.

Ответ 3

Вы можете использовать что-то вроде Magellan из Foundation:

http://foundation.zurb.com/docs/components/magellan.html

Если вы хотите сделать это вручную, вам нужно вычислить смещение каждого h1, используя jQuery offset, а затем привязка к .scroll событие обработчик, который отображает и прикрепляет правый элемент:

var $h1 = $("h1")

//Example: Offset top of the first h1
h1OffsetTop = $h1.eq(0).offset().top

$(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    //Do comparison to scrollTop to each h1, etc.
    //Then add fixed class to the correct h1 and remove it from all others
});

Ответ 4

Вы можете использовать библиотеку Twitter Bootstrap Affix, которая является автономной реализацией именно того, что вам нужно. Просто дайте ему атрибуты данных, которые вы нужны, например:

<section>

    <h1 data-spy="affix" data-offset-top="60" data-offset-bottom="200">Title</h1>
    <div class="summary">
    ...

В качестве альтернативы вы можете вычислить нижнюю границу смещения, если высота содержимого неизвестна:

$('h1').affix({
    offset: {
        top: 100
        , bottom: function () {
            return (this.bottom = $('.summary').offset().top + $('.summary').outerHeight(true))
        }
    }
})

Помните, что реализация JavaScript будет предпочтительнее атрибутов данных.

Ответ 5

Вот небольшая функция JavaScript/jQuery, основанная на Stick div сверху после прокрутки, которая должна соответствовать вашим потребностям:

function sticky()
{
    var window_top=$(window).scrollTop();
    var top_position=$('body').offset().top;
    var element_to_stick=$('h1');

    if (window_top > top_position) {
        element_to_stick.addClass('sticky').css('position', 'fixed');
    } else {
        element_to_stick.removeClass('sticky').css('position', 'relative');
    }
}
$(window).scroll(sticky);
sticky();

С липким классом CSS вы можете вносить изменения в липкий элемент. Конечно, часть css ('position', 'fixed | relative') также может быть непосредственно помещена в CSS.