Скользить вверх по боковой панели, на прокрутке - PullRequest
Новая
       13

Скользить вверх по боковой панели, на прокрутке

0 голосов
/ 30 мая 2018

Пытаясь добиться аффекта, как видно здесь .Это два раздела, «боковая панель» и «основной».Когда пользователь прокручивает «основной» раздел мимо, два поста.«Боковая панель» переместит одну «кавычку» вверх.

Я могу настроить таргетинг на раздел «основной» записи в окне просмотра и добавить класс.Что я не могу обернуть мою голову вокруг.Как добавить эффект на «боковую панель», когда ее положение зафиксировано без прокрутки.

Не слишком уверен, как назвать этот эффект;трудно "гуглить" его.У кого-нибудь есть мысли?

Ответы [ 2 ]

0 голосов
/ 30 мая 2018

После игры с 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');
0 голосов
/ 30 мая 2018

Я не уверен, что бы вы назвали это, но вы все равно можете перемещать элемент внутри элемента с фиксированной позицией.

Из того, что я вижу, они устанавливают контейнер боковой панели как фиксированныйи затем поместите высокий контент внутри, затем с помощью transform поместите внутреннее содержимое в контейнер.

Имеет ли это смысл?

enter image description here

Я вижу следующее в их коде:

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">
...