Я хочу переместить заголовок "navbar" с начальной страницы, когда позиция навигатора на странице достигает 400 пикселей.
Если вы посмотрите на этот jsfiddle, я хочу, чтобы .navbar
покинул верхнюю часть страницы, когда начинается синий блок (при 400 пикселей). Наббар останется на странице через красный div, а затем оставьте верхнюю часть страницы, когда начнется синий блок.
Я попытался сделать это с помощью scrollorama (плагин jquery), но еще не успел:
$(document).ready(function() {
var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
scrollorama.animate('#fly-in',{ delay: 400, duration: 300, property:'top', start:-1400, end:0 });
});
Я ищу либо чистое решение для javascript, либо плагин scrollorama. Спасибо за любые идеи!
Я не очень хорошо знаком с плагином scrollorama, но вы можете сделать это просто с помощью jQuery через событие scroll()
:
$(window).scroll(function () {
var winTop = $(this).scrollTop();
var redHeight = $('#red').height();
if (winTop >= redHeight) {
/*if the scroll reaches the bottom of the red <div> make set '#move' element
position to absolute so it will move up with the red <div> */
$('#move').css({
'position': 'absolute',
'bottom': '0px',
'top': 'auto'
});
} else {
//else revert '#move' position back to fixed
$('#move').css({
'position': 'fixed',
'bottom': 'auto',
'top': '0px'
});
}
});
См. Обновленный файл jsfiddle: jsfiddle.net/52VtD/1945/
Изменение: сделайте так, чтобы навигационная панель исчезла с той же точки, что и красный div
Я заметил это раньше, но у меня возникли проблемы с поиском проблемы, поэтому я удалил импортированную таблицу стилей и создал базовый стиль для навигационной панели. Чтобы навигация исчезла с той же точки, что и красная div, вам нужно вычесть высоту навигационной панели:
if (winTop >= redHeight - $('#move').height()) {
Я также изменил разметку, чтобы заставить ее работать правильно. Я вложил навигатор в красный div и установил красную позицию div relative
.
См. Этот jsfiddle: jsfiddle.net/52VtD/1981/
прослушивание события прокрутки с помощью jquery, чтобы найти, перекрывает ли navbar красный или синий div
Назначить класс красному div
<div class="redDiv" style="height:400px; background-color: red;">
Затем прослушайте событие прокрутки и используйте getBoundingClientRect(), чтобы найти координату навигационной панели и div в порт представления, чтобы проверить наложение
$(document).scroll(function(event)
{
var rect1 = $('.navbar').get(0).getBoundingClientRect();
var rect2 = $('.redDiv').get(0).getBoundingClientRect();
var overlap = !(rect1.right < rect2.left ||
rect1.left > rect2.right ||
rect1.bottom < rect2.top ||
rect1.top > rect2.bottom)
if(!overlap)
{
if ( $(".navbar").is(":visible") ) {
$('.navbar').hide();
}
}
else
{
if ( !$(".navbar").is(":visible") ) {
$('.navbar').show();
}
}
});
Вот рабочая скрипка http://jsfiddle.net/SXzf7/