Исправлена ​​боковая панель при прокрутке, затем возвращалась к нормальной при прокрутке вверх

Question

Я хочу имитировать этот эффект для боковой панели: https://www.matchesfashion.com/us/womens/just-in/just-in-this-month

Я думаю, что у меня все работает, ожидаю прокрутки вверх.Вот мой кодовый блок: https://codepen.io/anon/pen/vVByvR?editors=0010

    var $sideBar = $('.sidebar');
    var sideBarOriginalST = $sideBar.position().top;
    var placedAchieved = false;
    var sideBarPostion = -570;
    var lastScrollTop = 0;
    var stopPos = ($sideBar.position().top + $sideBar.outerHeight())  - 291;

    $(window).on('scroll', function() {
        var sT = $(this).scrollTop();
        $sideBar = $('.sidebar');

        if(sideBarOriginalST <=  sT && !placedAchieved) {
            $sideBar.css({
                position: 'fixed',
                top: (sT-sideBarOriginalST) * -1
            });

            placedAchieved = false;
        }

        if(stopPos <= sT) {
            placedAchieved = true;

            $sideBar.css({
                position: 'fixed',
                top: sideBarPostion
            })
        }

        // having trouble on scroll up event
        if (sT < lastScrollTop) {
            console.log(sT, sideBarPostion);
            placedAchieved = false;
            // $sideBar.css({
            //     position: 'fixed',
            //     top:  sideBarPostion+=1
            // });
        }

        if(sideBarOriginalST >= sT) {
            $sideBar.css({
                position: 'static',
                top: 0
            });
            placedAchieved = false;
        }

        lastScrollTop = sT;
    })

Answer 1

Нет необходимости в JavaScript!Используйте position: sticky.Больше информации: https://css -tricks.com / position-sticky-2 /

Answer 2

Это то, что вы ищете?

var $sidebar = $('.sidebar');
var sidebar_height = $sidebar.height();
var $last_item = $('.sidebar .row:last-child');
var last_item_offset = $last_item.offset().top;
var last_item_height = $last_item.height();

 $(window).on('scroll', function() {
   var scroll_top = $(this).scrollTop();

   if(scroll_top >= last_item_offset)
   {
     $sidebar.css({
       position: 'fixed',
       top: '-' + (sidebar_height - last_item_height) + 'px'
     });
   }
   else
   {
     $sidebar.css({
       position: 'static',
       top: 'auto'
     });
   }
});

https://codepen.io/anon/pen/oavZyg?editors=0010