如何讓DIV模塊隨着頁面固定和不固定

本文轉載自查看原文 2019-01-18 10:52 937 1.HTML+CSS/ 2.jQuery

最近做公司官網，左邊文章列表，右邊文章詳情，要求左邊文章列表隨着頁面向上滾動到某個位置時，固定在頁面頂部，當滾動到footer出現時，div模塊隨頁面滾動而不再固定在頂部。

思路：

1，給外層的div設置position:relative;

2，判斷div塊到達頁面頂部時，設置fixed固定屬性

3，判斷左邊div塊的距離滾動條頂部的距離 + 左div塊的高度 >= 右邊文章詳情距滾動條頂部的距離 + 詳情頁的高度，改變div塊的bottom top設為auto

4，判斷左邊div塊的距離滾動條頂部的距離 + 左div塊的高度 < 右邊文章詳情距滾動條頂部的距離 + 詳情頁的高度，改變div塊的bottom top設為auto

5，當div塊的bottom小於一個臨界點時，讓bottom為auto，top為0

源代碼

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5   <meta charset="UTF-8">
  6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8   <title>DIV模塊隨着頁面固定和不固定隨意切換</title>
  9 </head>
 10 <style>
 11   header {
 12     width: 100%;
 13     height: 200px;
 14     background: #FFA500;
 15   }
 16   #container .article {
 17     width: 1200px;
 18     margin: 0 auto;
 19     overflow: hidden;
 20   }
 21   #container .article .articlebox {
 22     overflow: hidden;
 23     position: relative;
 24   }
 25   #container .article .articlebox .articlelist {
 26     width: 330px;
 27     height: 560px;
 28     background: #8A2BE2;
 29     float: left;
 30   }
 31   #container .article .articlebox .articledetail {
 32     width: 770px;
 33     height: 1560px;
 34     background: #FFB6C1;
 35     float: right;
 36   }
 37   #footer {
 38     width: 100%;
 39     height: 500px;
 40     background: #6495ED;
 41   }
 42 </style>
 43 
 44 <body>
 45   <header>
 46   </header>
 47   <div id="container">
 48     <div class="article">
 49       <div class="articlebox">
 50         <div class="articlelist" style="bottom: auto;top: 0;">
 51         </div>
 52         <div class="articledetail">
 53         </div>
 54       </div>
 55     </div>
 56   </div>
 57   <div id="footer"></div>
 58 </body>
 59 <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
 60 <script>
 61   /**
 62    * Created by Administrator on 2019/01/18.
 63    */
 64   $(document).ready(function () {
 65 
 66     $(window).scroll(function () {
 67       // 200是header的高度
 68       if ($(document).scrollTop() >= 200) {
 69         $('.articlelist').css({
 70           position: 'fixed'
 71         });
 72         // 判斷左邊div塊的距離滾動條頂部的距離 + 左div塊的高度 >= 右邊文章詳情距滾動條頂部的距離 + 詳情頁的高度
 73         if (($('.articlelist').offset().top + $('.articlelist').height()) >= ($('.articledetail').offset().top + $('.articledetail').height())) {
 75           // 改變div塊的bottom  top設為auto
 76           $('.articlelist').css({
 77             bottom: ($(window).height() + $(document).scrollTop() - $('#footer').offset().top) + 'px',
 78             top: 'auto'
 79           })
 80           // 判斷左邊div塊的距離滾動條頂部的距離 + 左div塊的高度 < 右邊文章詳情距滾動條頂部的距離 + 詳情頁的高度
 81         } else if ((($('.articlelist').offset().top + $('.articlelist').height()) < ($('.articledetail').offset().top + $('.articledetail').height()))) {
 83           $('.articlelist').css({
 84             bottom: ($(window).height() + $(document).scrollTop() - $('#footer').offset().top) + 'px',
 85             top: 'auto'
 86           })
 87           if (($(window).height() + $(document).scrollTop() - $('#footer').offset().top) <= $(window).height() - $('.articlelist').height()) {
 89             $('.articlelist').css({
 90               bottom: 'auto',
 91               top: '0'
 92             })
 93           }
 94         }
 95       } else if ($(document).scrollTop() < 200) {
 96         $('.articlelist').css({
 97           position: 'static'
 98         });
 99       }
100     });
101   })
102 </script>
103 
104 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 Css之固定div頭部 js把div固定在頁面的右下角 Css實現 div footer 固定在html頁面底部 div滾動到頁面頂端后固定住滾動頁面時DIV到達頂部時固定在頂部讓一個div始終固定在頁面的某一固定位置的方法 div固定在屏幕底部 div固定浮動某位置 html css div固定底部分享CSS固定DIV，導航條頂部固定fixed