我想要设置的东西基本上是一个分为两列的网页，左右两个，每个一个div。 left div将是静态内容，但通常比浏览器视口更长/更高。右栏可以是任意长度，因为它将包含博客文章。
当访问者向下滚动页面时，我希望双方以正常方式滚动。我希望左侧停止滚动并在到达其内容的末尾时保持静态。当人再次向上滚动时，左侧应该恢复正常并向右滚动向上。
我还在jsfiddle注册了一个关于我所追求的东西的演示：https://jsfiddle.net/robaxx/c359rbc4/
好吧..显然我必须使用与jsfiddle不同但看似相同的工具将代码插入到帖子中。所以我也做到了。
无论如何。我从stackoverflow上的其他帖子获得了JS并修改它以适应我的html和css演示。
演示开始时两个面板彼此相邻。向下滚动脚本中指定的一定量后，左侧div设置为固定位置和底部零点。
这基本上是正确的想法，但不是很光滑，因为高度只是一些像素而不是视口的高度。
所以我正在寻找更好的版本。如果左侧面板可以平稳运行，甚至可以动画或弹回，那就更好了！
感谢您对此提出的任何建议。 问候 罗布
编辑： 我已经改变了固定的高度来尝试拿起window.innerheight，这看起来是正确的想法，但我不确定语法和它如何组合在一起所以它可能是错的。任何帮助表示赞赏。
再次编辑： 我刚刚意识到我应该拿起左边div的长度，而不是窗口高度。不知道怎么做。
$(document).ready(function() {
var windw = this;
var windowHeight = window.innerHeight;
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(windw);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'fixed',
top: 'inherit',
bottom: 0
});
} else {
$this.css({
position: 'absolute',
top: 0,
bottom: 'inherit'
});
}
});
};
$('#left').followTo(windowHeight);
});#left {
background:lightgrey;
box-sizing:border-box;
padding:20px;
width:25%;
position:absolute;
top:0;
left:0;
}
#right {
background:lightblue;
box-sizing:border-box;
padding:20px;
width:75%;
position:absolute;
top:0;
left:25%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="left">
<p>This side should only scroll down as far as it has content and then become fixed to the bottom.</p><br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br /><br />
<p>Scrolling up should return it to normal behaviour.</p>
</div>
<div id="right">
<p>This side should be able to scroll all the way to the bottom.</p><br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
Lorem ipsum etc etc<br />
</div>