Затем прокрутите вверх
Просто интересно, есть ли у кого-нибудь идея о том, как я могу воссоздать стиль навигационной панели, который я видел некоторое время назад, я просто нашел сайт, на котором я его видел, но не знаю, как они могли туда попасть. В основном хотите, чтобы она прокручивалась со страницы, а затем блокировалась в верхней части экрана.
http://lesscss.org/
Ответы
Ответ 1
Просто сделайте быстрый "источник просмотра" на http://lesscss.org/, и вы увидите следующее:
window.onscroll = function () {
if (!docked && (menu.offsetTop - scrollTop() < 0)) {
menu.style.top = 0;
menu.style.position = 'fixed';
menu.className = 'docked';
docked = true;
} else if (docked && scrollTop() <= init) {
menu.style.position = 'absolute';
menu.style.top = init + 'px';
menu.className = menu.className.replace('docked', '');
docked = false;
}
};
Они привязаны к событию onscroll
для окна, это событие запускается при прокрутке окна. Флаг docked
имеет значение true, когда меню "заблокировано" в верхней части страницы, для меню установлено значение position:fixed
, в то время как для этого флага установлено значение true
. Остальное - это всего лишь несколько простых "мы собираемся прокрутить меню с страницы" и "находимся ли мы назад, где мы начали" логику проверки позиции.
Вы должны быть осторожны с событиями onscroll
, хотя они могут быстро стрелять много, поэтому ваш обработчик должен быть довольно быстрым и должен прекомпопутировать как можно больше.
В jQuery это будет выглядеть примерно так:
$(window).scroll(function() {
// Pretty much the same as what on lesscss.org
});
Вы часто встречаетесь с "плавающей почти фиксированной позицией вертикальной панелью инструментов", например, на cracked.com.
Ответ 2
mu слишком короткий ответ работает, я просто отправляю его, чтобы дать вам jquery script!
var docked = false;
var menu = $('#menu');
var init = menu.offset().top;
$(window).scroll(function()
{
if (!docked && (menu.offset().top - $("body").scrollTop() < 0))
{
menu.css({
position : "fixed",
top: 0,
});
docked = true;
}
else if(docked && $("body").scrollTop() <= init)
{
menu.css({
position : "absolute",
top: init + 'px',
});
docked = false;
}
});
Ответ 3
Ответ Mu дал мне далеко. Я попробовал свою удачу с помощью метода replicationg lesscss.org, но столкнулся с проблемами при изменении размера и масштабировании браузера. Понадобился время, чтобы узнать, как правильно реагировать на это и как reset исходную позицию (init
) без jQuery или любой другой библиотеки.
Найти предварительный просмотр в JSFiddle: http://jsfiddle.net/ctietze/zeasg/
Итак, вот простой код JavaScript, на всякий случай, если JSFiddle отказывается работать.
Класс повторного использования прокрутки, затем-щелчок
Здесь можно использовать многоразовую версию. Я поместил прокрутки в класс, потому что методы-помощники загромождали мое основное пространство имен:
var windowScrollTop = function () {
return window.pageYOffset;
};
var Menu = (function (scrollOffset) {
var Menu = function () {
this.element = document.getElementById('nav');
this.docked = false;
this.initialOffsetTop = 0;
this.resetInitialOffsetTop();
}
Menu.prototype = {
offsetTop: function () {
return this.element.offsetTop;
},
resetInitialOffsetTop: function () {
this.initialOffsetTop = this.offsetTop();
},
dock: function () {
this.element.className = 'docked';
this.docked = true;
},
undock: function () {
this.element.className = this.element.className.replace('docked', '');
this.docked = false;
},
toggleDock: function () {
if (this.docked === false && (this.offsetTop() - scrollOffset() < 0)) {
this.dock();
} else if (this.docked === true && (scrollOffset() <= this.initialOffsetTop)) {
this.undock();
}
}
};
return Menu;
})(windowScrollTop);
var menu = new Menu();
window.onscroll = function () {
menu.toggleDock();
};
Обработка событий изменения размера/страницы
var updateMenuTop = function () {
// Shortly dock to reset the initial Y-offset
menu.undock();
menu.resetInitialOffsetTop();
// If appropriate, undock again based on the new value
menu.toggleDock();
};
var zoomListeners = [updateMenuTop];
(function(){
var w = window,
d = document,
e = d.documentElement,
g = d.getElementsByTagName('body')[0];
var lastWidth = 0;
function pollZoomFireEvent() {
var widthNow = w.innerWidth || e.clientWidth || g.clientWidth;
if (lastWidth == widthNow) {
return;
}
lastWidth = widthNow;
// Length changed, user must have zoomed, invoke listeners.
for (i = zoomListeners.length - 1; i >= 0; --i) {
zoomListeners[i]();
}
}
setInterval(pollZoomFireEvent, 100);
})();
Ответ 4
Звучит как приложение Jquery ScrollTop и некоторые манипуляции с CSS-свойствами элемента navbar. Так, например, при определенных условиях прокрутки элемент навигатора изменяется от абсолютного позиционирования с вычисленными координатами до фиксированного позиционирования.
http://api.jquery.com/scrollTop/
Ответ 5
Эффект, который вы описываете, обычно начинается с некоторого типа анимации, например, в ответе TheDeveloper. По умолчанию анимации обычно перемещают элемент вокруг, изменяя его положение с течением времени или затухая элемент в/из, изменяя его непрозрачность и т.д.
Получение эффекта "bouce back" или "snap to" обычно подразумевает ослабление. Все основные структуры имеют некоторую форму ослабления. Это все о личных предпочтениях; вы не можете ошибиться ни с одним из них.
jQuery имеет смягчающие плагины, которые можно использовать с помощью функции .animate()
, или вы можете использовать jQueryUI.
MooTools имеет облегчение встраивания в класс FX основной библиотеки.
Yahoo YUI также имеет облегчение встраивания.
Если вы помните, какой сайт он был, вы всегда можете снова посетить его и посмотреть на источник, чтобы узнать, какие рамки и эффект были использованы.