Прикрепленный заголовок после прокрутки вниз

Question

Прикрепленный заголовок после прокрутки вниз

58 ов принято

Вот начало . В принципе, мы копируем заголовок при загрузке, а затем проверяем (используяwindow.scrollYили.down), чтобы видеть, когда пользователь прокручивается за пределы точки (например, 200 пикселей). Затем мы просто переключаем класс (в этом случаеtransition: top 0.2s ease-in), который перемещает оригинал в поле зрения.

Наконец, все, что нам нужно сделать, это применить .downк нашему клону, чтобы, когда он находится в header { position: relative; width: 100%; height: 60px; } header.clone { position: fixed; top: -65px; left: 0; right: 0; z-index: 999; transition: 0.2s top cubic-bezier(.3,.73,.3,.74); } body.down header.clone { top: 0; } состоянии, он скользит в поле зрения. Dunked делает это лучше, но с небольшой игрой вокруг легко настроить

CSS

var sticky = {
  sticky_after: 200,
  init: function() {
    this.header = document.getElementsByTagName("header")[0];
    this.clone = this.header.cloneNode(true);
    this.clone.classList.add("clone");
    this.header.insertBefore(this.clone);
    this.scroll();
    this.events();
  },

  scroll: function() {
    if(window.scrollY > this.sticky_after) {
      document.body.classList.add("down");
    }
    else {
      document.body.classList.remove("down");
    }
  },

  events: function() {
    window.addEventListener("scroll", this.scroll.bind(this));
  }
};

document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));

либо Vanilla JS (при необходимости заполнять полином)

$(document).ready(function() {
  var $header = $("header"),
      $clone = $header.before($header.clone().addClass("clone"));

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

или jQuery

translate()

Новые размышления

В то время как выше ответы на исходный вопрос OP «Как Dunked достичь этого эффекта?» , Я бы не рекомендовал этот подход. Во-первых, копирование всей верхней навигации может быть довольно дорогостоящим, и нет реальной причины, почему мы не можем использовать оригинал (с небольшой работой).

Кроме того, Пол Ирланд и другие, писали о том, как анимация с topлучше, чем оживление top. Он не только более совершенен, но также означает, что вам не нужно знать точную высоту вашего элемента. Вышеупомянутое решение будет изменено следующим образом (см. JSFiddle) :

header.clone {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: translateY(-100%);
  transition: 0.2s transform cubic-bezier(.3,.73,.3,.74);
}

body.down header.clone {
  transform: translateY(0);
}

Единственный недостаток использования преобразований заключается в том, что, несмотря на то, что поддержка браузера довольно хороша , вы, вероятно, захотите добавить версии с префиксом поставщика, чтобы максимизировать совместимость.

9

Вот скрипка JS http://jsfiddle.net/ke9kW/1/

Как говорят другие, установите заголовок на фиксированный и запустите его с помощью дисплея: none

затем jQuery

$(window).scroll(function () {
  if ( $(this).scrollTop() > 200 && !$('header').hasClass('open') ) {
    $('header').addClass('open');
    $('header').slideDown();
   } else if ( $(this).scrollTop() <= 200 ) {
    $('header').removeClass('open');
    $('header').slideUp();
  }
});

где 200 - высота в пикселях, на которые вы хотите, чтобы она двигалась вниз. Добавление открытого класса состоит в том, чтобы позволить нам запускать elseif вместо просто else, поэтому некоторые из кода не излишне выполняются на каждом прокрутке, сохраняя бит памяти

2

Вот список плагинов jQuery , который поможет достичь аналогичного эффекта: http://jquery-plugins.net/tag/sticky-scroll

1

Я использовал функцию jQuery .scroll () для отслеживания события прокрутки панели инструментов с помощью scrollTop. Затем я использовал условие, чтобы определить, было ли оно больше, чем значение того, что я хотел заменить. В приведенном ниже примере это были «Результаты». Если значение было истинно, тогда метка результатов добавила класс fixedSimilarLabel и новые стили были приняты во внимание.

    $('.toolbar').scroll(function (e) {
//console.info(e.currentTarget.scrollTop);
    if (e.currentTarget.scrollTop >= 130) {
        $('.results-label').addClass('fixedSimilarLabel');
    }
    else {      
        $('.results-label').removeClass('fixedSimilarLabel');
    }
});

http://codepen.io/franklynroth/pen/pjEzeK

0

аналогичное решение с использованием jquery будет:

$(window).scroll(function () {
  $('.header').css('position','fixed');
});

Это мгновенно превращает заголовок в элемент фиксированной позиции

JavaScript, JQuery, заголовок, липкая,

javascript,jquery,header,sticky,

24

Ответов: 10