Slide Up Side Bar, On Scroll

Question

Trying to achieve affect as seen here. It's two sections, 'sidebar' and 'main'. When the user scrolls through the 'main' section past, two post. The 'sidebar' will move one 'quote' up.

I'm able to target the 'main' post section, in the view port and add a class. What I can't wrap my head around. Is how to add an effect on the 'sidebar', when its position fixed w/ no-scroll.

Not too sure what to call this effect; having a hard time 'google-ing' it. Anyone have any thoughts?

Answer 1

After playing around with the Javascript, this is the solution I came up with.

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');

Answer 2

I'm not sure what you'd call it, but you can still move an element inside a fixed position element around.

From what I can see, they're setting the sidebar container as fixed, and then placing the tall content within, then using transform to position the inner content within the container.

Does that make sense?

I see the following in their code:

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