Я видел этот липкий заголовок на этом сайте: http://dunked.com/ (больше не активен, просматривать архивный сайт)
При прокрутке вниз липкий заголовок спускается сверху.
Я просмотрел код, но выглядит очень сложно. Я только понимаю это: Обычный заголовок был клонирован с помощью JS, и когда вы прокручиваете вниз страницу, которую он оживляет сверху.
Здесь начинается. В принципе, мы копируем заголовок при загрузке, а затем проверяем (используя .scrollTop() или window.scrollY), чтобы видеть, когда пользователь прокручивается за пределы точки (например, 200 пикселей). Затем мы просто переключаем класс (в данном случае .down), который перемещает исходный код в поле зрения.
Наконец, все, что нам нужно сделать, это применить transition: top 0.2s ease-in к нашему клону, так что, когда он в состоянии .down, он переходит в режим просмотра. Dunked делает это лучше, но с небольшой игрой вокруг легко настроить
CSS
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;
}
либо Vanilla JS (polyfill по мере необходимости)
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));
или jQuery
$(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));
});
});
В то время как выше ответы на исходный вопрос OP "Как Dunked достигает этого эффекта?", я бы не рекомендовал этот подход. Во-первых, копирование всей верхней навигации может быть довольно дорогостоящим, и нет реальной причины, по которой мы не можем использовать оригинал (с небольшой работой).
Кроме того, Paul Irish и другие, писали о, как анимация с помощью translate() лучше, чем анимация с помощью 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);
}
Единственным недостатком использования преобразований является то, что пока поддержка браузера довольно хороша, вы, вероятно, захотите добавить префиксные версии поставщика, чтобы максимизировать совместимость.
Вот сценарий 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, поэтому некоторые из кода без необходимости запускаются на каждом прокрутке, сохраняют небольшой бит памяти
Вот довольно список плагинов jQuery, которые помогут достичь аналогичного эффекта: http://jquery-plugins.net/tag/sticky-scroll
Я использовал функцию 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');
}
});
аналогичное решение с использованием jquery будет:
$(window).scroll(function () {
$('.header').css('position','fixed');
});
Это превращает заголовок в элемент фиксированной позиции сразу же при прокрутке
Добавить debouncing для эффективности http://davidwalsh.name/javascript-debounce-function
CSS
header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
}
JS:
$(window).scroll(function() {
if ($(this).scrollTop() > 100){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
Это не работало для меня в Firefox.
Мы добавили условие, основанное на том, помещает ли код переполнение на уровне html. Смотрите Анимать scrollTop не работает в firefox.
var $header = $("#header #menu-wrap-left"),
$clone = $header.before($header.clone().addClass("clone"));
$(window).on("scroll", function() {
var fromTop = Array();
fromTop["body"] = $("body").scrollTop();
fromTop["html"] = $("body,html").scrollTop();
if (fromTop["body"])
$('body').toggleClass("down", (fromTop["body"] > 650));
if (fromTop["html"])
$('body,html').toggleClass("down", (fromTop["html"] > 650));
});
Я предлагаю использовать липкие js, у которых есть лучший вариант, который я видел. вам нечего делать только на этом js на вас
https://raw.githubusercontent.com/garand/sticky/master/jquery.sticky.js
и используйте ниже код:
<script>
$(document).ready(function(){
$("#sticker").sticky({topSpacing:0});
});
</script>
Его git repo: https://github.com/garand/sticky
снизу окна прокрутите до верхней прокрутки с помощью jquery.
<script>
var lastScroll = 0;
$(document).ready(function($) {
$(window).scroll(function(){
setTimeout(function() {
var scroll = $(window).scrollTop();
if (scroll > lastScroll) {
$("header").removeClass("menu-sticky");
}
if (scroll == 0) {
$("header").removeClass("menu-sticky");
}
else if (scroll < lastScroll - 5) {
$("header").addClass("menu-sticky");
}
lastScroll = scroll;
},0);
});
});
</script>