91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

css如何實現網頁欄目左側固定當滾動到底部時自動調整位置

發布時間:2021-03-18 14:24:27 來源:億速云 閱讀:190 作者:小新 欄目:web開發

這篇文章給大家分享的是有關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如何實現網頁欄目左側固定當滾動到底部時自動調整位置 ”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

css
AI

台安县| 禄劝| 营山县| 增城市| 天津市| 奈曼旗| 濉溪县| 哈尔滨市| 曲周县| 日土县| 湖北省| 峡江县| 祁东县| 棋牌| 丹江口市| 托里县| 慈溪市| 资溪县| 长顺县| 揭西县| 甘谷县| 城固县| 凤庆县| 蕉岭县| 武宣县| 漳州市| 通州市| 宁城县| 双辽市| 达日县| 会同县| 三明市| 马公市| 石首市| 屏东市| 嘉禾县| 达拉特旗| 贺兰县| 青阳县| 金阳县| 石家庄市|