jQuery滚动DIV：当DIV到达页脚时停止滚动

本文介绍了jQuery滚动DIV：当DIV到达页脚时停止滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我有 #sidebar （从我的 #header div下面开始）和 #footer （离页面底部大约120px）。

I have a #sidebar (which starts below my #header div) and a #footer (around 120px off the bottom of the page).

我正在尝试使用侧边栏滚动内容页。下面的代码半成功完成：

I'm trying to make the sidebar scroll with the content of the page. The code below does this semi-successfully:

/* profile sidebar */ #sidebar>div{ width: 300px; margin-top: 10px; } #sidebar.fixed>div{position:fixed;top:0;} #sidebar.fixed_bottom>div{position:fixed;bottom:172px;} jQuery(function ($) { $.fn.scrollBottom = function() { return $(document).height() - this.scrollTop() - this.height(); }; var el = $('#sidebar'), pos = el.position().top; $(window).scroll(function() { if ($(this).scrollTop() >= pos) { if ( $(this).scrollBottom() <= 172 ) { el.removeClass('fixed'); el.addClass('fixed_bottom'); } else { el.removeClass('fixed_bottom'); el.addClass('fixed'); } } else { el.removeClass('fixed'); } }); });

问题是，在较小的分辨率下，一旦你到达某个位置，这会使侧栏跳在页面上。它阻止它与页脚重叠（如果你删除 fixed_bottom 类就会出现问题），但看起来不太好。

The problem is, on smaller resolutions, this makes the sidebar "jump" once you reach a certain position on the page. It stops it from overlapping the footer (which is the problem if you remove the fixed_bottom class) but doesn't look good.

我想做的是：用户滚动到页面底部，侧边栏与内容一起滚动，直到它达到我的页脚顶部上方20px，此时它保持在那里直到用户向上滚动。

What I'd like to do is this: user scrolls to the bottom of the page, the sidebar scrolls along with the content until it reaches say 20px above the top of my footer, at which point it stays there until the user scrolls back up.

提前致谢，

推荐答案

我相信这应该做你想要的。

I believe this should do what you want.

jsfiddle/FDv2J/ 3 /

#sidebar>div{ width: 100px; margin-top: 10px; position:fixed; left: 0; top: 0;}

$(function() { $.fn.scrollBottom = function() { return $(document).height() - this.scrollTop() - this.height(); }; var $el = $('#sidebar>div'); var $window = $(window); $window.bind("scroll resize", function() { var gap = $window.height() - $el.height() - 10; var visibleFoot = 172 - $window.scrollBottom(); var scrollTop = $window.scrollTop() if(scrollTop < 172 + 10){ $el.css({ top: (172 - scrollTop) + "px", bottom: "auto" }); }else if (visibleFoot > gap) { $el.css({ top: "auto", bottom: visibleFoot + "px" }); } else { $el.css({ top: 0, bottom: "auto" }); } }); });

我试图分解并以可以理解的方式命名变量。如果你有任何不确定的地方，请告诉我。请注意，我添加了 resize 以及滚动，因为如果窗口改变大小，这很重要。

I tried to break things up and name variables in such a way that it would be understandable. Let me know if there's anything you're unsure of. Notice that I added resize as well as scroll since it matters if the window changes size.

编辑：修改后的版本使用与原始相似的技术找到上限：

Modified version using similar technique to the original to find the upper bound:

jsfiddle/FDv2J/4/

$(function() { $.fn.scrollBottom = function() { return $(document).height() - this.scrollTop() - this.height(); }; var $el = $('#sidebar>div'); var $window = $(window); var top = $el.parent().position().top; $window.bind("scroll resize", function() { var gap = $window.height() - $el.height() - 10; var visibleFoot = 172 - $window.scrollBottom(); var scrollTop = $window.scrollTop() if (scrollTop < top + 10) { $el.css({ top: (top - scrollTop) + "px", bottom: "auto" }); } else if (visibleFoot > gap) { $el.css({ top: "auto", bottom: visibleFoot + "px" }); } else { $el.css({ top: 0, bottom: "auto" }); } }).scroll(); });

body{ margin: 0; } #sidebar>div { width: 100px; height: 300px; margin-top: 10px; background-color: blue; position: fixed; } #stuff { height: 1000px; width: 300px; background-image: url("placekitten/100/100") } #footer, #header { height: 172px; width: 300px; background-color: yellow; }

<script src="ajax.googleapis/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="header"></div> <div id="sidebar"> <div class="fixed">sidebar</div> </div> <div id="stuff"> </div> <div id="footer"> </div>