Jquery Scrolling div - 防止输入网站页脚 [英] Jquery Scrolling div - Prevent from entering site footer
问题描述
我在我的网站上有一个侧边菜单，我希望始终可见。
要完成此操作，我将使用此页面中的以下代码示例：
http://camwebdesign.com/demos/jquery-scrolling-element。 html
问题是，与示例不同，我的网站有一个巨大的1000px高度的页脚。
当用户将内容滚动到页脚div上时，侧边菜单与其重叠。
有没有办法修改Jquery代码，其底部有一个边界为1000px，以防止这种情况？
谢谢！
< html>
< title>在使用JQuery滚动时保持元素视图< / title>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=CDN>< /脚本>
< script>
$（）。ready（function（）{
var $ scrollingDiv = $（＃scrollingDiv）;
$（window）.scroll b $ b $ scrollingDiv
.stop（）
.animate（{marginTop：（$（window）.scrollTop（）+ 30）+px}，slow）;
}）;
}）;
< / script>
< div style =float：left; width：70％>
< h1>在使用JQuery滚动时保持元素视图< / h1>
< div id =scrollingDivstyle =position：absolute; top：32px; right：16px; width：21％; padding：0％2％2％2％border：2px solid red; color：#ffeaea;>
< h2>滚动元素< / h2>
向下滚动/向上滚动查看我顺利重新定位自己并保持视线。< br />< br />
< em> Smooooooooooooooooooth< / em>< br />
< / div>
< div style =clear：both;>< / div>
< div id =footerstyle =width：100％; height：1000px; background：＃333; color：#FFF; >
< h1>页脚< / h1>
< / div>
演示 >
全屏
http://jsfiddle.net/NsfwM/embedded/result/
JS
var $ scrollingDiv = $（＃scrollingDiv）;
$（window）.scroll（function（）{
var y = $（this）.scrollTop（），
maxY = $（'＃footer'）。offset （）.top，
scrollHeight = $ scrollingDiv.height（）;
if（y< maxY-scrollHeight）{
$ scrollingDiv
.stop b $ b .animate（{marginTop：（$（window）.scrollTop（））+px}，slow）;
}
}
另一个是你的30px偏移量
http://jsfiddle.net/NsfwM/1/
I have a side menu on my site that i would like always visible.
To accomplish this, I am using the following code sample from this page:
http://camwebdesign.com/demos/jquery-scrolling-element.html
The problem is that unlike the sample my site has a huge 1000px height footer. When the user scrolls the content over the footer div, the side menu overlaps it. Is there a way to modify the Jquery code where it has a boundry of 1000px on the bottom to prevent this?
Thanks!
<html>
<title>Keep element in view while scrolling using JQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=CDN"></script>
<script>
$().ready(function() {
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
});
});
</script>
<div style="float: left; width: 70%">
<h1>Keep element in view while scrolling using JQuery</h1>
<div id="scrollingDiv" style="position: absolute; top: 32px; right: 16px; width: 21%; padding: 0% 2% 2% 2%; border: 2px solid red; background-color: #ffeaea;">
<h2>Scrolling Element</h2>
Scroll down/up to see me smoothly reposition myself and keep in view.<br /><br />
<em>Smooooooooooooooooooth</em><br />
</div>
<div style="clear:both;"></div>
<div id="footer" style="width:100%; height:1000px; background:#333; color:#FFF;" >
<h1>Footer</h1>
</div>
Demo
fullscreen http://jsfiddle.net/NsfwM/embedded/result/
JS
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
var y = $(this).scrollTop(),
maxY = $('#footer').offset().top,
scrollHeight = $scrollingDiv.height();
if(y< maxY-scrollHeight ){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow" );
}
});
And another with your 30px offset in place http://jsfiddle.net/NsfwM/1/
这篇关于Jquery Scrolling div - 防止输入网站页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
