滚动div固定，直到页脚

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

我希望有人能帮助我，我一直在查找很多教程，以查看是否可以轻松完成，因为我是jQuery的新手，我正尝试在页面上向下滚动固定的div但是div到达底部时会移至页脚. 我想在jQuery中添加类似滚动控件的内容，然后在页面下方达到一定像素数时在jQuery中使用.css更改位置.我不确定该如何正确处理.我在jsfiddle中做了一个非常简化的版本，以说明我正在尝试做的事情，任何帮助将不胜感激. 谢谢

Hi I'm hoping somebody can help me out i've been looking up a lot of tutorials to see if this could be done easily I'm new to jQuery, I'm trying to scroll a fixed div down the page but the div is moving into the footer when it reaches the bottom. Im thinking in the jquery to add something like a scroll control and then when it reached a certain amount of pixels down the page to change the positioning with .css in the jquery. I'm not to sure how to go about it properly though. I've made a VERY simplified version in jsfiddle to kind of illustrate what i'm trying to do, any help would be appreciated. Thanks

[jsfiddle/wVhCR/]

[jsfiddle/wVhCR/]

推荐答案

以下是应该提供帮助的jQuery.只需创建一个CSS类，即可根据需要更改框.

Here's the jQuery which should help. Just make a css class that changes the box how you want it.

$(document).on('scroll', function(){ var scroller = $('#scroller'); var footer = $('#footer'); var scroll_bot = scroller.offset().top + scroller.height(); var footer_top = footer.offset().top; alert(scroll_bot); if(scroll_bot > footer_top){ scroller.addClass('classThatMakesBoxActRight'); }else{ scroller.removeClass('classThatMakesBoxActRight'); } });