Как задать класс блоку, при достижении прописанного id?
Здравствуйте уважаемые профессионалы!
Мне нужно сделать так, что бы при достижении блока с id #block1 верхнего окна браузера, фону в блоке #block2 задавался класс fixed, при достижении блока с id #block3 класс fixed снимался. И в обратном порядке! То есть, когда скроллишь снизу вверх, при достижении #block3 - класс fixed срабатывал, дойдя до #block1 класс fixed снимался!
Напишите пожалуйста код по возможности на JQ, заранее благодарен!
Здесь то что вам нужно. Я уже неоднократно отвечал на этот вопрос здесь. В сети есть целая куча всевозможных вариаций решения вашей задачи, достаточно лишь погуглить. По сути, всё сводится к тому, что в обработчике пролистывания страницы вам нужно проверять позицию нужного элемента на экране, вы проверяете его смещение относительно позиции скролла. Когда координаты смещения удовлетворяют условию, вы выполняете требуемое вам действие. Это одна из самых тривиальных задач jQuery.
Возможно я не правильно даю запросы в Гугл, так как несколько часов не мог найти этот код. Если у вас под рукой есть ссылка, скиньте пожалуйста! Буду безмерно благодарен.
var postion = $('#target').offset().top;
var height = $('#target').height();
$(document).on('scroll', function () {
var scroll = $(document).scrollTop();
if (scroll > postion && scroll < (postion + height) ) {
$('body').addClass('bg');
} else {
$('body').removeClass('bg');
}
});
Данный код делает следующее:
1) берет текущую позицию вашего элемента по оси Y
2) берет текущую высоту вашего элемента
3) вешает обработчик пролистывания страницы на всю вашу страницу
4) в обработчике определяет текущее смещение страницы относительно начальной позиции по оси Y
5) если смещение больше чем исходная позиция вашего элемента и меньше чем его высота (то есть, вы пролистали до элемента и не перелистали его ниже) - добавляет элементу класс .bg. Если меньше или равно - удаляет этот класс.
Сможете этот базовый пример под свои нужды переделать, надеюсь?
Что то у меня не получается. Я вот накидал в codepen, помогите решить правильно! При достижении контента верхнего края браузера, срабатывает fix. Мне нужно что fix срабатывал когда контент достигнет середины окна браузера, и не снимался до того времени пока нижний блок не перекроет его, что то вроде параллакса.
