我决定改进答案（在被接受后）。现在我创建了一个函数，它将处理 div 的定位。您可以在滚动、调整窗口大小等时运行它。我认为如果有人想使用此代码，这将非常有用。
只需更改变量：
你已经完成了:)。
欢迎提出进一步改进的建议。
JS-小提琴
JS-Fiddle
html
<header>
<h1>"The sticking sidebar"</h1>
</header>
<div id="content"><p>START<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.<br/>END</p></div>
<div id="sidebar"><p>START<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus a tellus tincidunt, lacinia ex facilisis, facilisis ipsum. Pellentesque ac accumsan mi. Vestibulum iaculis luctus ultricies. Integer aliquet, felis id facilisis consectetur, tortor ligula eleifend urna, convallis facilisis erat erat nec libero. Pellentesque finibus sed leo vel tincidunt. Praesent in est erat. Donec nec varius leo. Nam convallis feugiat velit at commodo. Mauris feugiat lorem eros, a varius sem gravida eu. Ut convallis, velit hendrerit semper laoreet, libero nunc egestas neque, et ultrices ex elit et lacus.<br/>END</p></div>
<footer><i>footer</i></footer>
css
header h1{
text-align: center;
}
#content{
float: left;
width: 70%;
background-color: rgb(150, 150, 0)
}
#sidebar{
position: relative;
width: 30%;
float: right;
background-color: yellow;
}
js/jQuery
$(document).ready(function(){
// define variables before scrollin to destress the processor
let contentHeight = $("#content").height();
let sidebarHeight = $("#sidebar").height();
let windowHeight = $(window).height();
let doc = $(document);
let contentOffset = $("#content").offset().top;
$(window).resize(function(){
//should reset all variables here or the code will bug out on screen resizing
contentHeight = $("#content").height();;
sidebarHeight = $("#sidebar").height();
windowHeight = $(window).height();
contentOffset = $("#content").offset().top;
determineSidebarScrollBehavior(doc, contentHeight, contentOffset, sidebarHeight,windowHeight);
});
$(document).scroll(function(){
determineSidebarScrollBehavior(doc, contentHeight, contentOffset, sidebarHeight, windowHeight);
}); // end scroll
});//end ready
function determineSidebarScrollBehavior(doc, contentHeight, contentOffset, sidebarHeight, windowHeight){
//only run if the #sidebar is higher than the #content
if(contentHeight>sidebarHeight){
var scrollTop = doc.scrollTop();
//check if variable has been previously created by this function else the value is 0
let oldScrollTop = (window.oldScrollTop)?window.oldScrollTop:0;
//create a marginTop var if it doesn t exist yet
window.marginTop = (window.marginTop)?marginTop:0;
//determine if you scroll up op down
let isScrollingDown = (scrollTop>oldScrollTop)?true:false;
//if the end of the sidebar reaches the end of the window change margin so it "sticks". It should stick until the #sidebar reaches the same height (inculding margin) as the #content.
if(isScrollingDown && scrollTop+windowHeight > contentOffset + sidebarHeight + marginTop){
marginTop = scrollTop + windowHeight-sidebarHeight-contentOffset;
// check if content would be too long, if so set the maximum marginTop
if(marginTop>contentHeight-sidebarHeight){
marginTop = contentHeight-sidebarHeight;
}
}
// if the start of the sidebar reaches the top while scrolling up, make it "stick"
else if(!isScrollingDown && scrollTop < contentOffset + marginTop){
marginTop = scrollTop - contentOffset;
// make sure margin-top cannot go negative
if(marginTop<0){
marginTop = 0;
}
}
//change the margin
$("#sidebar").css({'margin-top': marginTop});
}
window.oldScrollTop = scrollTop;
}