javascript - 滚动到达某个元素时如何更改css

Question

我有一个侧边栏，当页面滚动时它是固定的并且保持静止。我的问题是，当滚动碰到页脚时，它甚至保持静态，这使它进入页脚下方。我想要的是在滚动到达页脚时更改它的位置属性。

这是我尝试过的

<div class="left_sidebar fixme _resultFilter _resultFilter_fix" ng-show="gsaFilterShow && gsaFilterFilled" style="
                z-index: 1;
                border: 4px solid #dedcdd;
                overflow-x: hidden;
                overflow-y: scroll;">
    <p>This is a div</p>
</div>

<script>
    var fixmeTop = $('.fixme').offset().top;       // get initial position of the element

    $(window).scroll(function () {                  // assign scroll event listener

        var currentScroll = $(window).scrollTop(); // get current position


        if (currentScroll >= fixmeTop) {           // apply position: fixed if you
            $('.fixme').css({                      // scroll to that element or below it
                width: '222px',
                position: 'fixed',
                height: '80%',
                bottom: '400px',
                top: '80px',

            });
        } else if ($(window).scrollTop() >= $('.footer-top').offset().top) {         // apply position: fixed if you
            $('.fixme').css({                      // scroll to that element or below it
                position: 'relative',
                width: '500px'
            });
        }
        else {                                   // apply position: static
            $('.fixme').css({                      // if you scroll above it
                position: 'relative',
                top: '80px'
            });
        }
    });

</script>

标签： javascripthtmljquerycss