主页 / 建站知识 /

css实现网页栏目左侧固定当滚动到底部时自动调

建站知识 2021-07-03 07:55www.168986.cn长沙网站建设

预览地址

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://.w3./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://.w3./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<link href="css/layout.css" type="text/css" rel="stylesheet" />
<link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<div class=""></div>
<div class="page">
  <div class="left">
    <div class="left_poi"></div>
    <div class="left_in">
      <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></p>
    </div><!--left_in-->
    <script>
    $(window).scroll(function()
    {
        saction();
    });
    function saction()
    {
        sj = 20; //底部间隔
        st = $(window).scrollTop(); //滚动条高度
        sd = $(".left_poi").offset().;
        sd_h = $(".left_in").height();
        sb = $(".bottom").offset().;
        sb_h = $(".bottom").height();
        rd_h = $(".right").height();
        bh = window.innerHeight;
        si = sb-sd_h;
        if(st>sd && rd_h>=sd_h){
            $(".left_in").addClass("on");
            if(st>si){
                sy = bh-(sb-st)+sj;
                $(".left_in").css({"":"auto","bottom":sy+"px"});
            }else{
                $(".left_in").css({"":"","bottom":""});
            }
        }else{
            $(".left_in").removeClass("on");
        }
    }
    </script>
  </div><!--left-->
  <div class="right"></div>
  <div class="clear"></div>
</div><!--page-->
<div class="bottom"></div>
</body>
</html>

css

@charset "utf-8";
.clear {clear:both; height:0 !important; width:0 !important; overflow:hidden; font-size:0;}
. {width:100%; height:150px; background:#0CC;}
.bottom {width:100%; height:400px; background:#39C;}
.page {width:1200px; margin:20px auto; position:relative;}
.left {width:200px; float:left;}
.left_in {width:200px; background:#46bc67; border-:3px solid #000; border-bottom:3px solid #000;}
.left_in.on {position:fixed; :0;}
.left_poi {width:100%; height:1px; overflow:hidden;}
.right {width:960px; height:2100px; float:right; overflow:hidden; background:#FC3;}

以上所述是长沙网络推广给大家介绍的css实现网页栏目左侧固定当滚动到底部时自动调整位置 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持！

上一篇：CSS 类名的问题详解 下一篇：一个关于border-radius值设置的问题记录

长沙网站设计

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by