Исправлен заголовок в CSS для условного прокрутки вниз?

Я хочу сделать заголовок div (как баннер) исправленным только тогда, когда заголовок пытается выйти из экрана, когда пользователь прокручивается вниз. Можно ли обойтись без использования JS? Для примера на временной шкале Facebook, если мы прокручиваем вниз, баннер плавает, как только заголовок страницы выходит из экрана. Мой вопрос в том, можно ли делать только с CSS?

В случае, если это недостаточно ясно, я хочу знать, может ли стиль "position: fixed" применяться условно, например, когда прокручивается 80px страницы.

Ответ 1

Да. Вы можете сделать это только с помощью CSS. Это делается с помощью обычного прокручиваемого заголовка, расположенного над фиксированным, который появляется только после того, как нормальный прокручивается над ним. Это вроде как http://techcrunch.com делает это.

Обновление [10/31/2013] - Techcrunch недавно изменил свой интерфейс, чтобы больше не видеть его!

Проверьте это демо: http://jsfiddle.net/WDnyb/2/

HTML

<div class="header">Header</div>
<div class="outer">
    <span class="banner">LOGO</span>
    <div class="header">Header</div>
</div>
<div class="content">Content</div>

Соответствующий CSS

.header {
    width: 100%;
    position: fixed;
    top: 0;
    bottom: auto;
}
.outer {
    position: relative;
    height: 100px;
}
.outer .header {
    position: absolute;
    bottom: 0;
    z-index: 2;
    top: auto;
}
.content {
    height: 1500px;
    margin-top: 100px;
}

Ответ 2

Теперь это можно сделать правильно и без JavaScript с помощью position: sticky.

Обратитесь к https://css-tricks.com/position-sticky-2/ для примеров.

предупреждение: на момент написания статьи оно не поддерживается в браузерах IE11, Opera Mini ~~и Android~~: https://caniuse.com/#feat=css-sticky

Ответ 3

Невозможно использовать css. Вы можете использовать JavaScript или jQuery. Потому что ему нужны некоторые условия.

Ответ 4

Html----included my content within

   <header1>
       ..............
  </header1> 

 JS

  <script>
  $(document).ready(function() {
   var $header1 = $("header1"),
    $clone = $header1.before($header1.clone().addClass("clone"));

     $(window).on("scroll", function() {
    var fromTop = $("body").scrollTop();
    $('body').toggleClass("down", (fromTop > 200));
 });
 });
</script>

Я использовал выше script, чтобы сделать заголовок исправленным, его работая отлично в googlechrome не в firefox.....