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

川长思鸟来 2021-11-01 18:54 212阅读 0赞

html:

<!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" />
    <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="top"></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>
        <script>
        $(window).scroll(function()
        {
            saction();
        });
        function saction()
        {
            sj = 20; //底部间隔
            st = $(window).scrollTop(); //滚动条高度
            sd = $(".left_poi").offset().top;
            sd_h = $(".left_in").height();
            sb = $(".bottom").offset().top;
            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({"top":"auto","bottom":sy+"px"});
                }else{
                    $(".left_in").css({"top":"","bottom":""});
                }
            }else{
                $(".left_in").removeClass("on");
            }
        }
        </script>
      </div>
      <div class="right"></div>
      <div class="clear"></div>
    </div>
    <div class="bottom"></div>
    </body>
    </html>

css

@charset "utf-8";
    .clear {clear:both; height:0 !important; width:0 !important; overflow:hidden; font-size:0;}
    .top {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-top:3px solid #000; border-bottom:3px solid #000;}
    .left_in.on {position:fixed; top:0;}
    .left_poi {width:100%; height:1px; overflow:hidden;}
    .right {width:960px; height:2100px; float:right; overflow:hidden; background:#FC3;}

总结  
以上所述是小编给大家介绍的css实现网页栏目左侧固定当滚动到底部时自动调整位置 ，希望对大家有所帮助！  
![在这里插入图片描述][aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]

[aHR0cHM6Ly9vc2NpbWcub3NjaGluYS5uZXQvb3NjbmV0LzZmZThkNGE3YzMwMjBjMGFjYmU2ZTQxNDI3NWE4MTYyNDEwLmpwZw]: /images/20211101/adc9ac5e70464e028721fe51b9edfe0d.png