现在达到的效果是float层多余屏幕的部分隐藏到了footer的底层,
那么我想达到的效果是当float层底部滑动到footer的上界的时候他们的相对位置不变,
并且滚动条一直滑动到footer的最底部
不知这种效果是否可以实现
如果还没有清楚 我接着解释 本菜菜表达能力有待改善 O(∩_∩)O~<!DOCTYPE html>
<html>
<head>
<title>aaaaaa</title>
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px;
margin-top:20px; font-size:40px;}
.wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px; z-index:1; }.demo{height:1500px; z-index:1; }
.float{width:80px; padding:10px;padding-right:100px; border:1px solid #ffecb0;
background-color:#fffee0;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);
position:absolute; right:10%; top:131px; z-index:1;}
.float1{ padding:10px;padding-right:100px; position:absolute; left:0px;
z-index:100; background-color:#000;}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script></head>
<body><div><h1>header</h1></div><div class="wrap">
<div class="demo"></div>
<div class="float" id="float">aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/></div></div>
<div class="float1" id = "float1">
<h1>footer</h1>
<p>footerfooterfooterfooterfooterfooter
footerfooterfooterfooter
footerfooterfooter
footerfooterfooterfooter
footerfooterfooterfooter
footerfooterfooter
footerfooterfooter
footerfootereroter
footerfooterfooter
footerfooterfooterfooter
footerfooterfooterer
footerfooterfooterer</p>
<p>footerfooterfooter
footerfooterfooterfooter
footerfooterfooterfooter
footerfooterfooterfooterfooterfooter
footerfooterfooterfooter
footerfooterfooterfooterfooterfooterfooterfooteroterfooter
footeroterfooterfooter
footerfooterfooterfooterfooterfooterfooterfooterer
</p>
<p>footerfooterfooterfooter
footerfooterfooterfooterfooter
footerfooterfooterfooterfooterfooterfooterfooter
footerfooterfooterfooter
footerfooterfooterfooterfooterfooterfooterfooterfooterrfooter
footerfooteroterfooterfooter
footerfooterfooterfooterfooter
footerfooterfooterer
</p>
</div>
<script type="text/javascript">
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: pos,
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
$("#float").smartFloat();
</script>
</div></body>
</html>
那么我想达到的效果是当float层底部滑动到footer的上界的时候他们的相对位置不变,
并且滚动条一直滑动到footer的最底部
不知这种效果是否可以实现
如果还没有清楚 我接着解释 本菜菜表达能力有待改善 O(∩_∩)O~<!DOCTYPE html>
<html>
<head>
<title>aaaaaa</title>
<style type="text/css">
*{ margin:0; padding:0;}
body { font:12px/1.8 Arial; color:#666;}
h1.tit-h1 { font-size:38px; text-align:center; margin:30px 0 15px; color:#f60;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px;
margin-top:20px; font-size:40px;}
.wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px; z-index:1; }.demo{height:1500px; z-index:1; }
.float{width:80px; padding:10px;padding-right:100px; border:1px solid #ffecb0;
background-color:#fffee0;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);
position:absolute; right:10%; top:131px; z-index:1;}
.float1{ padding:10px;padding-right:100px; position:absolute; left:0px;
z-index:100; background-color:#000;}
</style>
<script type="text/javascript" src="jquery-1.4.4.min.js"></script></head>
<body><div><h1>header</h1></div><div class="wrap">
<div class="demo"></div>
<div class="float" id="float">aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/>
aaa<br/></div></div>
<div class="float1" id = "float1">
<h1>footer</h1>
<p>footerfooterfooterfooterfooterfooter
footerfooterfooterfooter
footerfooterfooter
footerfooterfooterfooter
footerfooterfooterfooter
footerfooterfooter
footerfooterfooter
footerfootereroter
footerfooterfooter
footerfooterfooterfooter
footerfooterfooterer
footerfooterfooterer</p>
<p>footerfooterfooter
footerfooterfooterfooter
footerfooterfooterfooter
footerfooterfooterfooterfooterfooter
footerfooterfooterfooter
footerfooterfooterfooterfooterfooterfooterfooteroterfooter
footeroterfooterfooter
footerfooterfooterfooterfooterfooterfooterfooterer
</p>
<p>footerfooterfooterfooter
footerfooterfooterfooterfooter
footerfooterfooterfooterfooterfooterfooterfooter
footerfooterfooterfooter
footerfooterfooterfooterfooterfooterfooterfooterfooterrfooter
footerfooteroterfooterfooter
footerfooterfooterfooterfooter
footerfooterfooterer
</p>
</div>
<script type="text/javascript">
$.fn.smartFloat = function() {
var position = function(element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function() {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
}else {
element.css({
position: pos,
top: top
});
}
});
};
return $(this).each(function() {
position($(this));
});
};
$("#float").smartFloat();
</script>
</div></body>
</html>
解决方案 »
- 求解释!!!!
- 利用网上MSClass.jsp做滚动效果时,显示的内容会重复一次。
- 烦请找错,方法不能调用,新手需帮助谢谢
- 使用loghtbox的问题
- 请教一段校验:text中只能输入0~5的两位小数,比如3.54,大于5、小于0或者非数字字符都给出错误提示
- 如何在一个页面里刷新其他不是通过window.open()打开的页面????
- 各位有谁知道可以突破网页广告过滤软件的JS代码?
- 有高手愿意解决我的问题吗?
- :急!急!急!怎样在javasrip中用正则表达方法检查表单的字符串是否非法
- 页面宽度自适应
- 网上找了一段注册页面的代码,想加个密码确认的功能不会了,请教大神
- 求助如何用CSS定义文本框和密码框的大小的一致
var top = wrapEl.offset().top;
var bottom = top + wrapEl.height() ;
return $(this).each(function() {
var obj = $(this);
var bot = bottom - obj.height();
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop > top && scrollTop < bot){
obj.css({top:scrollTop});
}
})
});
};$("#float").smartFloat($('div.demo'));