Question

尝试实现here的效果。这是两个部分，“侧边栏”和“主要”。当用户滚动过去的'main'部分时，两个帖子。 “侧边栏”将向上移动一个“引号”。

我可以在视口中定位'main'帖子部分并添加一个类。我无法解决的问题。是如何在'侧边栏'上添加效果，当它的位置固定为无滚动时。

不太清楚这个效果叫什么;很难'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');

向上滑动侧栏，在滚动上

2 个答案: