使用 JavaScript 将侧边栏放置在固定位置，自动跟踪它，然后重试

你好，这是 naouniverse ( @naouniverse708 )。

文章于2013/09/05 23:40,

我尝试将侧边栏等放置在固定位置并自动跟踪它。

我尝试过侧边栏的自动跟踪，但是问题很多。

具体来说，根据窗口大小，侧边栏可能会向侧面滑动或覆盖页脚。

我觉得这行不通，所以我又试了一次。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> jQuery(function(jQuery) { var pursue = jQuery("#pursue"); /* 固定したいものを指定 */ var offset = pursue.offset(); var stopslip; /* 横スベリ防止 */ var content = jQuery("#content"); var sidebar = jQuery("#sidebar"); var win = jQuery(window); var footer = jQuery("#footer").height()+70; var min_width = 1000; jQuery(window).scroll(function () { if(content.height() > sidebar.height() && win.scrollTop()+win.height() >= offset.top+pursue.height()+footer){ if (win.width() >= min_width){ stopslip = win.width()/2+200; pursue.css({ position:'fixed', width:300, bottom:footer, left:stopslip }); } else if(win.width() < min_width) { stopslip = 700-win.scrollLeft(); pursue.css({ position:'fixed', width:300, bottom:footer, left:stopslip }); } } else { pursue.css({ position:'static' }); } }); jQuery(window).resize(function () { if(content.height() > sidebar.height() && win.scrollTop()+win.height() >= offset.top+pursue.height()+footer){ if (win.width() >= min_width){ stopslip = win.width()/2+200; pursue.css({ position:'fixed', width:300, bottom:footer, left:stopslip }); } else if(win.width() < min_width) { stopslip = 700-win.scrollLeft(); pursue.css({ position:'fixed', width:300, bottom:footer, left:stopslip }); } } else { pursue.css({ position:'static' }); } }); }); </script>

.resize() 不仅对窗口滚动执行相同的处理，而且还对调整大小执行相同的处理。

将侧边栏放置在固定位置并自动跟踪的条件如下：

• 如果文章垂直长度比侧边栏长，且垂直滚动长度+窗口垂直长度超过初始固定部分位置+页脚长度

就是这样的感觉。
和，

1. 如果窗口宽度为 1000px 或以上
2. 如果窗口宽度小于1000px

而且每一种的处理方式都不同。
1000 像素是

var 最小宽度 = 1000;

这是从文章左边缘到侧边栏右边缘的距离。

该过程的不同部分是止滑部分。
根据窗口的水平长度，为stopslip分配不同的值。

如果是1.

//距窗口中间200px stopslip = win.width()/2+200;

在情况2中。

//从700px（文章水平长度）减去水平滚动stopslip = 700-win.scrollLeft();

最好分别为 200px 和 700px 部分声明变量，计算数值并分配它们。

而这次侧边栏的固定位置是基于底部的。
这减少了侧边栏中的空白量。

底部：页脚，

页脚是

var 页脚 = jQuery("#footer").height()+70;

我对其进行了适当调整，使其不与页脚重叠。

嗯，看起来像这样，但也许我可以让它更清爽一点......