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

Question

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

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

Answer 1

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

Обновление [31.10.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;
}

Answer 2

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

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

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

Answer 3

Это невозможно с помощью CSS. Вы можете сделать с помощью JavaScript или JQuery. Потому что для этого нужны некоторые условия.

Answer 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>

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