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

您正在寻找什么吗？

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

Answer 2

不需要javascript！使用position: sticky。更多信息：https://css-tricks.com/position-sticky-2/

固定了滚动条上的侧边栏，向上滚动时又恢复正常

2 个答案: