固定位置侧菜单的javascript问题

我正在建立一个带有侧边栏的网站，一旦用户滚动过某个点，它就会固定在网站上。这段代码运行良好

我遇到的问题是，当用户滚动到页面底部时，侧边栏与页脚重叠。我编写了代码来检测边栏底部何时与包含元素的位置相同——当这种情况发生时，我将获取包含元素底部的位置，减去边栏元素的高度，并使用该数字赋予边栏新的“顶部”（同时将位置更改为“绝对”）

这就是我遇到的问题所在——当用户滚动边栏时，边栏位于页脚上方，被调用的代码在正常的“固定”位置代码和“绝对”位置代码之间交替出现，从而产生闪烁效果

就我的一生而言，我不明白为什么“固定”代码不断被调用

代码如下：

    ( function( $ ) {

        var sidebar_pos = $('#secondary')[0].getBoundingClientRect();
        var pos_top = sidebar_pos.top + window.scrollY; //need this to get the pos of TOP in the browser - NOT the viewport
        var main_pos = $('.main-content')[0].getBoundingClientRect();
        var main_bottom = main_pos.bottom  + window.scrollY;
        var stop_pos;
        var i = 0;
        $(window).scroll(function(event){
            var scroll = $(window).scrollTop();
            var produce_pos = $('.produce')[0].getBoundingClientRect();
            var pos_bottom = produce_pos.bottom  + window.scrollY;
            //console.log("scroll "+scroll);
            //console.log("top " + pos_top);
            console.log(main_bottom);
            console.log('bottom ' + pos_bottom);
               if( scroll >= pos_top){
                if ( pos_bottom >= main_bottom ){
                    //if the sidebar would end up overlapping the footer
                    if(i == 0){
                        //only need to set this once, not on every scroll
                        stop_pos = main_bottom  - $('#secondary').height() ;
                    } 
                    $('#secondary').removeClass('hover').css({
                        position: 'absolute',
                        margin:0,
                        left: sidebar_pos.left,
                        top: stop_pos
                    });
                    i++;
                } else {
                    $('#secondary').addClass('hover').css({
                        position: 'fixed',
                        left: sidebar_pos.left,
                        marginTop: '1.5em',
                        top: 20
                    });
                    setTimeout(() => {
                        $('*[data-widget="comet"]').addClass('active');
                    }, 5000);
                    setTimeout(() => {
                        $('*[data-widget="produce"]').addClass('active');
                    }, 7000);
                }
            } else if( scroll < pos_top && $('#secondary').hasClass('hover') ){  //if user scrolls up past original pos of sidebar, remove effects
                $('#secondary').removeClass('hover').css({
                    position: 'relative',
                    left: 'auto',
                    top: 'auto'
                });
                i = 0;
            }
        });
}( jQuery ) );

（函数（$）{
var侧边栏_pos=$（'#secondary'）[0]。getBoundingClientRect（）；
var pos_top=sidebar_pos.top+window.scrollY；//在浏览器中获取top的位置时需要此选项，而不是在视口中
var main_pos=$（'.main content'）[0]。getBoundingClientRect（）；
var main\u bottom=main\u pos.bottom+window.scrollY；
var停止位置；
var i=0；
$（窗口）。滚动（功能（事件）{
var scroll=$（窗口）.scrollTop（）；
var product_pos=$（'.product'）[0].getBoundingClientRect（）；
var pos_bottom=生产位置底部+窗口滚动；
//console.log（“滚动”+滚动）；
//控制台日志（“顶部”+位置顶部）；
控制台日志（主菜单底部）；
控制台日志（底部+位置底部）；
如果（滚动>=位置顶部）{
如果（位置底部>=主底部）{
//如果侧边栏最终与页脚重叠
如果（i==0）{
//只需设置一次，而不是每次滚动
stop_pos=main_bottom-$（'#secondary'）。高度（）；
} 
$（'#secondary'）.removeClass（'hover'）.css({
位置：'绝对'，
保证金：0，
左：侧边栏位置左，
顶部：停止位置
});
i++；
}否则{
$（'#secondary'）.addClass（'hover'）.css({
位置：'固定'，
左：侧边栏位置左，
marginTop：“1.5em”，
前20名
});
设置超时（（）=>{
$（'*[data widget=“comet”]'）。addClass（'active'）；
}, 5000);
设置超时（（）=>{
$（'*[data widget=“product”]'）。addClass（'active'）；
}, 7000);
}
}否则如果（滚动

我还有一个脚本代码笔。

---

非常感谢您的帮助！谢谢

这很简单，只需将Z-index属性添加到页脚CSS中，这样它将始终与侧边栏重叠。 关于z-index属性，您可以参考本文

---

我不希望它滑到下面，我希望它位于包含元素的底部。