Сдвинуть вверх боковую панель при прокрутке
Пытаюсь добиться эффекта как видно здесь. Это два раздела, «боковая панель» и «основная». Когда пользователь пролистывает «основной» раздел, появляются две публикации. «Боковая панель» переместится на одну «цитату» вверх.
Я могу настроить таргетинг на «основной» раздел поста в окне просмотра и добавить класс. Что не могу обернуть голову. Вот как добавить эффект на «боковую панель», когда ее положение фиксировано без прокрутки.
Не совсем уверен, как назвать этот эффект; с трудом "гуглить" это. У кого-нибудь есть мысли?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я не уверен, как бы вы это назвали, но вы все равно можете перемещать элемент внутри элемента с фиксированной позицией.
Насколько я могу судить, они устанавливают контейнер боковой панели как фиксированный, а затем помещают в него высокое содержимое, а затем используют transform для размещения внутреннего содержимого в контейнере.
Имеет ли это смысл?
Я вижу в их коде следующее:
css
@media only screen and (min-width: 769px)
.clientNavigation {
position: fixed;
min-width: 350px;
width: 100vw;
height: 100vh;
padding-bottom: 60px;
overflow: visible;
background-color: transparent;
}
html
<section class = "page-section__left">
<div class = "clientNavigation">
<div class = "scroll-wrapper">
<ul class = "clientNavigation__list">
Вы хотите вложить все в фиксированный контейнер?
Да, вот как бы я это сделал. Я обновил ответ тем, что вижу в их ответе, хотя должен сказать, что вы правы. Я не думаю, что это именно то, что они делают.
Это интересно - элементы, которые мы видим на левой панели, являются родственниками элементов, которые соответствуют их прокрутке на правой панели. Я не знаю, как именно им это удается.
Я должен это удалить? Это просто сбивает с толку?
вот что меня смущает. Я проверил page-section__left / clientNavigation, и это выглядит как скрытая навигация, когда вы уходите с домашней страницы.
Поигравшись с Javascript, я пришел к этому решению.
https://jsfiddle.net/5Lov4t8z/2/
var $animation_elements = $('.animation-element');
var $window = $(window);
var $infoBlock = $('.infoBlock');
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($infoBlock, function(index){
var $el_block = $(this) ;
var el_block_height = $el_block.outerHeight();
var el_block_top_position = $el_block.offset().top;
var el_block_bottom_position = (el_block_top_position + el_block_height);
var count = index * 2 ;
$el_block.attr('id','#' + count );
$el_block.css('z-index', '10' + index);
});
$.each($animation_elements, function(index) {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view').attr('id', index);
$('.sidebar').find('div.infoBlock[id = "#'+$(this).attr('id')+'"]').addClass('active');
} else {
$element.removeClass('in-view');
$('.sidebar').find('div.infoBlock[id = "#'+$(this).attr('id')+'"]').removeClass('active');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
Я думаю, они придерживаются другого подхода. Из того, что я могу сказать, когда-либо "боковая панель" фиксирована, а "основной" раздел поста перемещается. быстрая рабочий пример jsfiddle.net/5Lov4t8z/1