jquery根据滚动条把DIV固定在某一个位置的问题

jqueryjavascript

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

参考如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.cf:after{content:'';display:block;clear:both;}
.cf{zoom:1;}
.warp{width:1024px;margin:0 auto;}
.warp .left{float:left;height:2000px;background:red;width:800px;}
.warp .right{float:right;width:224px; position:relative;}
.warp .right .up{height:1000px;background:blue;}
.warp .right .down{height:500px;background:green; width:224px;}
.footer{width:1024px;margin:0 auto;height:400px;background:#000;}
.fixed{ position:fixed;right:0;bottom:0;}
</style>
<script type="text/javascript" src="http://festatic.aliapp.com/js/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
//检查对象，#boxs是要随滚动条固定的ID
    var offset = $('#boxs').offset();
var offset_f=$('.footer').offset();//获取底部
    $(window).scroll(function () {
    //检查对象的顶部是否在游览器可见的范围内
        var scrollTop = $(window).scrollTop();
            if (offset.top <= scrollTop){
                $('#boxs').addClass('fixed');
            }
            else{
                $('#boxs').removeClass('fixed');
            }
//当底部进入可视区
if($(window).height()+scrollTop>=offset_f.top)
{console.log($(window).height()+'|'+scrollTop+'|'+offset_f.top+'|'+$("#boxs").offset().top);
$('#boxs').css({bottom:$(window).height()+scrollTop-offset_f.top});//底部进入可视区，开始控制boxs
}
        });
})
</script>
</head><body>
<div class="warp cf">
<div class="left"></div>
    <div class="right">
     <div class="up"></div>
        <div class="down" id="boxs"></div>
    </div>
</div>
<div class="footer"></div>
</body>
</html>
在底部区域出现之前，boxs已经转成了固定定位，按照你的需求，当底部出现的时候，那么boxs的top距离顶部不在固定，必须按照底部进入可视区的高度在原来的 top 上减掉，也就是让boxs上移，从而达到不遮盖底部的效果不过你可以这么简单的理解，比如boxs一直固定在页面底部也就是 bottom:0;right:0;当底部出现的时候，那么boxs要远离底部，让出位置给底部，距离底部的距离就是底部进入可视区的高度
还是不行，boxs一直是固定在页面顶部的，top:0;
当box移动到footer事，应该让box的top变成它最开始的距顶部的距离吧