jQuery-使元素在滚动过某个点后保持在原来的位置

我有以下代码：-

HTML

<div id="header"></div>
<div id="content">
    <div class="sidebar-wrapper"></div>
</div>
<div class="sessions-wrapper"></div>
<div id="footer"></div>

jQuery

jQuery.fn.scrollBottom = function() {
    return jQuery(document).height() - this.scrollTop() - this.height();
};

var sidebar = jQuery('.sidebar-wrapper');
var pwindow = jQuery(window);
var sessions = jQuery('.sessions-wrapper');
var sidebar_gap = sidebar.offset().top;

pwindow.bind("scroll resize", function() {
    var gap = pwindow.height() - sidebar.height() - 10;
    var sessions_gap = sessions.offset().top - sidebar.offset().top;
    var visibleFoot = 172 - pwindow.scrollBottom();
    var scrollTop = pwindow.scrollTop()

    if(scrollTop > sidebar_gap - 140 && sessions_gap > 750 && visibleFoot < -850) {
        sidebar.css({
            'position': 'fixed',
            'top': '100px',
            'width': '100%'
        });
    } else if (sessions_gap < 750 && visibleFoot > -850) {
        sidebar.css({
            'position': 'static',
            'top': '0px',
            'width': '100%'
        });
    } else {
        sidebar.css({
            'position': 'static',
            'top': '0px',
            'width': '100%'
        });
    }
});

jQuery.fn.scrollbooth=函数（）{
返回jQuery（document.height（）-this.scrollTop（）-this.height（）；
};
var sidebar=jQuery（'.sidebar包装器'）；
var pwindow=jQuery（窗口）；
var sessions=jQuery（'.sessions包装器'）；
var sidebar_gap=sidebar.offset（）.top；
bind（“滚动调整大小”，函数（）{
var gap=pwindow.height（）-侧边栏.height（）-10；
var sessions_gap=sessions.offset（）.top-sidebar.offset（）.top；
var visibleFoot=172-pwindow.scrollbooth（）；
var scrollTop=pwindow.scrollTop（）
如果（滚动顶部>侧边栏间隙-140和&sessions\u间隙>750和&visibleFoot<-850）{
sidebar.css({
'位置'：'固定'，
“顶部”：“100px”，
“宽度”：“100%”
});
}否则如果（课时间隔<750&&visibleFoot>-850）{
sidebar.css({
“位置”：“静态”，
“顶部”：“0px”，
“宽度”：“100%”
});
}否则{
sidebar.css({
“位置”：“静态”，
“顶部”：“0px”，
“宽度”：“100%”
});
}
});

此时，

侧边栏包装器

会随着页面向下滚动，直到到达底部。而不是

sidebar wrapper

当在底部时返回其原始位置，我希望能够使该元素保持在它消失的位置，然后在返回页面时滚动

我这样做是因为这个函数可以在不同的页面上使用相同的元素，但内容不同（因此每个页面上的元素高度不同）

提前谢谢，如果我不清楚，请告诉我。

试试这个：

    if(scrollTop > 500 && sessions_gap > 750 && visibleFoot < -850) {
        sidebar.css({
            'position': 'fixed',
            'top': '100px',
            'width': '100%'
        });
    } else if (scrollTop > 500 && sessions_gap > 750 && visibleFoot >= -850) {
        sidebar.css({
            'position': 'relative',
            'top': (gap+700)+'px',
            'width': '100%'
        });
    } else {
        sidebar.css({
            'position': 'static',
            'top': '0px',
            'width': '100%'
        });
    }

if（scrollTop>500和&sessions\u gap>750和&visibleFoot<-850）{
sidebar.css({
'位置'：'固定'，
“顶部”：“100px”，
“宽度”：“100%”
});
}否则如果（scrollTop>500&&sessions\u gap>750&&visibleFoot>=-850）{
sidebar.css({
'位置'：'相对'，
“顶部”：（间隙+700）+“px”，
“宽度”：“100%”
});
}否则{
sidebar.css({
“位置”：“静态”，
“顶部”：“0px”，
“宽度”：“100%”
});
}

---

我不知道为什么，但是div在jsiddle上会闪烁，我不知道它在其他地方是否也会闪烁。

我认为这个脚本可以满足您的要求：

<script type='text/javascript'>
  jQuery.fn.scrollBottom = function() {
    console.log('scrollBottom');
    return jQuery(document).height() - this.scrollTop() - this.height();
};

var sidebar = jQuery('.sidebar-wrapper');
var pwindow = jQuery(window);
var sessions = jQuery('.sessions-wrapper');
var sidebar_gap = sidebar.offset().top;

var content = $('#content');

// original sidebar position
var original_sidebar_top = sidebar.position().top;    
var desired_offset = 140;
var separation = 20;

pwindow.bind('scroll resize', function() {
    // sidebar & header height
    var sb_height = sidebar.height();        
    var header_height = $('#header').height();
    var scrollTop = pwindow.scrollTop();        

    // compute the real offset in screen (not the document)
    var screen_offset_ss = sessions.offset().top - scrollTop;        
    var distance = desired_offset+sb_height+separation;

    // there's space for the sidebar
    if (distance < screen_offset_ss) {
        // header is not showing, fix sidebar position
        if (scrollTop > header_height-desired_offset) {
            console.log('fixed');
            sidebar.css({
                'position': 'fixed',
                'top': desired_offset+'px'
            });
        }
        // header is showing, return sidebar to original position
        else {
            console.log('static');
            sidebar.css({
                'position': 'static',
                'top': original_sidebar_top+'px'
            });                
        }
    }

    // there's no space for the sidebar
    else {
        console.log('20px');
        sidebar.css({
            'position': 'relative',                
            // place the sidebar right above the sessions (with separation)
            'top': sessions.offset().top - content.position().top - sb_height - separation
        });
    }
});
</script>

---

如果您仍然需要边距，最好将其设置为

marginbottom:50px

在

#内容中

是的，我注意到闪烁，它在其他地方也会闪烁，就好像else-if和else在某个特定点上冲突，但从我所看到的情况来看，@nurient绝对不会发生闪烁，因为当位置固定时，元素的高度不会增加到文档的高度。将“位置”设置为“静态”时，元素的高度将添加到计算的文档高度中。因此，当这种情况发生时，您的演算会出现问题。此脚本唯一没有做的事情是元素

。当边栏包装器从底部元素达到20px时，它不会停留在底部位置，而是消失了。我误解了您的要求。编辑以满足您的需要。太棒了，谢谢@Dacklf，这解决了两个问题：）
<script type='text/javascript'>
  jQuery.fn.scrollBottom = function() {
    console.log('scrollBottom');
    return jQuery(document).height() - this.scrollTop() - this.height();
};

var sidebar = jQuery('.sidebar-wrapper');
var pwindow = jQuery(window);
var sessions = jQuery('.sessions-wrapper');
var sidebar_gap = sidebar.offset().top;

var content = $('#content');

// original sidebar position
var original_sidebar_top = sidebar.position().top;    
var desired_offset = 140;
var separation = 20;

pwindow.bind('scroll resize', function() {
    // sidebar & header height
    var sb_height = sidebar.height();        
    var header_height = $('#header').height();
    var scrollTop = pwindow.scrollTop();        

    // compute the real offset in screen (not the document)
    var screen_offset_ss = sessions.offset().top - scrollTop;        
    var distance = desired_offset+sb_height+separation;

    // there's space for the sidebar
    if (distance < screen_offset_ss) {
        // header is not showing, fix sidebar position
        if (scrollTop > header_height-desired_offset) {
            console.log('fixed');
            sidebar.css({
                'position': 'fixed',
                'top': desired_offset+'px'
            });
        }
        // header is showing, return sidebar to original position
        else {
            console.log('static');
            sidebar.css({
                'position': 'static',
                'top': original_sidebar_top+'px'
            });                
        }
    }

    // there's no space for the sidebar
    else {
        console.log('20px');
        sidebar.css({
            'position': 'relative',                
            // place the sidebar right above the sessions (with separation)
            'top': sessions.offset().top - content.position().top - sb_height - separation
        });
    }
});
</script>

.sidebar-wrapper {
    width: 100%;
    height: 350px; /*depends on content*/
    background: rgba(0,0,0,0.2);
    border-radius: 20px;
    /*padding: 20px;         commented*/
    /*margin-top: 50px;      commented*/
}