现在的位置: 首页 > WEB前端 > 正文
滚动页面时不同模块经过此处的标志位时此处的内容发生变化[实例]
2013年08月01日 WEB前端 ⁄ 共 1606字 暂无评论 ⁄ 被围观 999 views+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> 滚动页面时不同模块经过此处的标志位时此处的内容发生变化[实例] </title>

  <script type="text/javascript" src="http://js.imglafaso.com/js/jquery-1.6.4.min.js"></script>

  <style>
    .top{position:relative;height:800px;width:80%;border:1px solid #ccc;margin:0 auto;margin-top:910px;}
    .content{height:600px;width:80%;border:1px solid #ccc;margin:0 auto;margin-top:10px;}
    .footer{height:800px;width:80%;border:1px solid #ccc;margin:0 auto;margin-top:10px;}
    .floats{height:80px;width:80px;border:1px solid #cccbackground:red;position:fixed;left:15px;top:50pxdisplay:none;}
  </style>
 </head>
 <body>
  <div class="top" id="top"></div>
  <div class="content" id="content"></div>
  <div class="footer" id="footer"></div>
  <div class="floats" id="floats"></div>
  <script>
    $(window).scroll(function(){
        var tY = $("#top").offset().top,        //top offset top
            cY = $("#content").offset().top,    //content offset top
            rY = $("#footer").offset().top,        //footer offset top
            sY = $(document).scrollTop(),        //srcoll height
            fT = parseInt($("#floats").css('top'));    //floats position top
        if(sY>=tY-fT && sY <cY-fT){
            $("#floats").css({display:'block',background:'blue'})
        }else if(sY>=cY-fT && sY <rY-fT){
            $("#floats").css({background:'red'})
        }else if(sY>=rY-fT){
            $("#floats").css({background:'green'})
        }else{
            $("#floats").css({display:'none'})
        }
    });
  </script>
 </body>
</html>

给我留言

您必须 [ 登录 ] 才能发表留言!