phpstudy集成环境

 首页 > 一个滚动后固定的问题

一个滚动后固定的问题


<!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>


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


<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>
    <div class="header">头部</div>
    <div class="box clearfix">
        <div id="Jmain" class="main"></div>
        <div class="sub" id="Jsub">
            <div class="sub01"></div>
            <div class="sub01"></div>
            <div id="JfixBox" class="fixed">
                <div class="boxs">1</div>
                <div class="boxs">2</div>
                <div class="boxs">3</div>
                <div class="boxs">4</div>
                <div class="boxs">5</div>
            </div>
        </div>
    </div>
    <div class="footer">尾部</div>
<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>
【热门文章】
【热门文章】