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

前端  /  管理员 发布于 7年前   183

预览地址：

https://ovsexia.gitee.io/leftfixed/

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><!--left_in-->    <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><!--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;}.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实现网页栏目左侧固定当滚动到底部时自动调整位置 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对站的支持！


  • 上一条：
    CSS 类名的问题详解
    下一条：
    CSS3 分类菜单效果

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客