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

2023-06-08 06:06:10 641人浏览八月长安

摘要

这篇文章给大家分享的是有关CSS如何实现网页栏目左侧固定当滚动到底部时自动调整位置的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。预览地址：https://ovsexia.gitee.io/leftfixed/h

这篇文章给大家分享的是有关CSS如何实现网页栏目左侧固定当滚动到底部时自动调整位置的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

预览地址：

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如何实现网页栏目左侧固定当滚动到底部时自动调整位置 ”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: css如何实现网页栏目左侧固定当滚动到底部时自动调整位置

本文链接: https://www.lsjlt.com/news/252250.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

这篇文章给大家分享的是有关css如何实现网页栏目左侧固定当滚动到底部时自动调整位置的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。预览地址：https://ovsexia.gitee.io/leftfixed/h...

99+

2023-06-08
JS如何实现滚动到指定位置导航栏固定顶部

小编给大家分享一下JS如何实现滚动到指定位置导航栏固定顶部，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！代码：<!DOCT...

99+

2024-04-02