div浮动层与footer相对位置滑动问题（之前的类似问题没有表达清楚的延续）
现在达到的效果是float层多余屏幕的部分隐藏到了footer的底层，
那么我想达到的效果是当float层底部滑动到footer的上界的时候他们的相对位置不变，
并且滚动条一直滑动到footer的最底部
不知这种效果是否可以实现
如果还没有清楚 我接着解释 本菜菜表达能力有待改善 O(∩_∩)O~
- HTML code
<!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>footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfootereroterfooterfooterfooterfooterfooterfooterfooterfooterfooterfootererfooterfooterfooterer</p><p>footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooteroterfooterfooteroterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterer</p><p>footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterrfooterfooterfooteroterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterer</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>------解决方案--------------------
- JScript code
<!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;height:1400px;}.float1{ position:fixed;padding:10px;padding-right:100px;left:0px; z-index:100; background-color:#000;}</style> <script type="text/javascript" src="jquery-1.3.2.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/>aaa1<br/>aaa2<br/>aaa3<br/>aaa4<br/>aaa5<br/>aaa6<br/>aaa7<br/>aaa8<br/>aaa9<br/>aaa10<br/>aaa11<br/>aaa12<br/>aaa13<br/>aaa14<br/></div></div><div class="float1" id = "float1"><h1>footer</h1><p>footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfootereroterfooterfooterfooterfooterfooterfooterfooterfooterfooterfootererfooterfooterfooterer</p><p>footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooteroterfooterfooteroterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterer</p><p>footerfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterrfooterfooterfooteroterfooterfooterfooterfooterfooterfooterfooterfooterfooterfooterer</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>
[解决办法]
HTML结构一样
- JScript code
$.fn.smartFloat = function(wrapEl) { 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'));