javascript - 一个滚动后固定的问题-PHP中文网问答


<!DOCTYPE html>
<head>

<style type="text/css">
*{ padding:0px; margin:0px;}
.box{ width:1000px; background:#ccc; margin:0 auto; overflow:hidden;}
.main{ width:770px; height:2000px; background:#000; float:left;}
.sub{ width:220px; background:#FC6; float:right;}
.sub01{ width:220px; height:100px; background:#0CC; margin-bottom:10px;}
.fixed{ width:220px; height:1000px; background:#F66; font:normal 13px/30px \5FAE\8F6F\96C5\9ED1; text-align:center; top:10px; border-bottom: 3px solid #fff}

.fix {
position: fixed;
bottom: 0;
_position: absolute;
_top: documentElement.scrollTop - this.parentNode.clientHeight+documentElement.clientHeight;
}


.fix-btm {
position: relative;
zoom: 1;
}

</style>

</head>
<body>


<p class="box">
    <!--代码开始-->
    <p class="main"></p>
    <p class="sub">
        <p class="sub01"></p>
        <p class="sub01"></p>
        <p class="fixed">我是固定的哟</p>     
    </p>
    <!--代码结束-->
</p>


<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>


<script type="text/javascript">
    
</script>


</body>
</html>

本人前端菜鸟，刚刚接触前端开发，想实现这样一个效果‘#fixed’ 到达浏览器底部时候，固定在浏览器底端，当往上滚动时候，恢复。

<!DOCTYPE html> <head> <style type="text/css"> *{ padding:0px; margin:0px;} .box{ width:1000px; background:#ccc; margin:0 auto; overflow:hidden; margin-bottom:20px;} .main{ width:770px; height:2000px; background:#000; float:left;} .sub{ width:220px; background:#FC6; float:right;} .sub01{ width:220px; height:100px; background:#0CC; margin-bottom:10px;} .fixed{ width:220px; background:#F66; font:normal 13px/30px \5FAE\8F6F\96C5\9ED1; text-align:center;} .fixed .boxs{background:red; height: 198px; color:#fff; line-height: 200px;border:1px solid #fff;} .fix { position: fixed; bottom: 0; _position: absolute; _top: documentElement.scrollTop - this.parentNode.clientHeight+documentElement.clientHeight; } .fix-btm { position: relative; zoom: 1; } .clearfix{*zoom:1} .clearfix:after{content:"\20";clear:both;height:0;display:block;overflow:hidden} .footer,.header{background:#000; height:200px; color:#fff; text-align:center; line-height: 200px;} .header{margin-bottom:5px;} </style> </head> <body> <p class="header">头部</p> <p class="box clearfix"> <p id="Jmain" class="main"></p> <p class="sub" id="Jsub"> <p class="sub01"></p> <p class="sub01"></p> <p id="JfixBox" class="fixed"> <p class="boxs">1</p> <p class="boxs">2</p> <p class="boxs">3</p> <p class="boxs">4</p> <p class="boxs">5</p> </p> </p> </p> <p class="footer">尾部</p> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var $main = $('#Jmain'), mainHeight = $main.height(), $fixBox = $('#JfixBox'), subHeight = $('#Jsub').height(), winHeight = $(window).height(), //窗口大小 mainBottomPos = $main.offset().top + mainHeight, maxTop = mainHeight - $fixBox.height() - (subHeight-$fixBox.height()), threshold = maxTop; $(window).scroll(function(){ var scrollTop = $(document.body).scrollTop(), delta = mainBottomPos - winHeight - scrollTop; if(delta <= 0){ $fixBox.addClass('fix-btm'); $fixBox.css('top',maxTop); }else if(delta <= threshold){ $fixBox.removeClass('fix-btm'); $fixBox.css('top','auto'); if(!$fixBox.hasClass('fix')){ $fixBox.addClass('fix'); } }else{ $fixBox.removeClass('fix-btm'); $fixBox.removeClass('fix'); } }); }); </script> </body> </html>