向上滾動側欄

Question

試圖達到這里看到的效果。 這是兩個部分，“側邊欄”和“主”。 當用戶滾動瀏覽“主要”部分時，將顯示兩個帖子。 “側邊欄”將向上移動一個“引號”。

我可以在視口中定位“主要”帖子部分，並添加一個類。 我無法纏住我的頭。 當它的位置固定為無滾動時，如何在“側邊欄”上添加效果。

不太確定如何稱呼這種效果； 很難“ google-ing”它。 有人有什么想法嗎？

Answer 1

我不知道該怎么稱呼，但是您仍然可以在固定位置元素內移動元素。

從我所看到的，他們將邊欄容器設置為固定，然后將高內容放置在其中，然后使用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">

Answer 2

在使用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');