如何让DIV模块随着页面固定和不固定

最新推荐文章于 2022-08-08 16:09:13 发布

weixin_30276935

最新推荐文章于 2022-08-08 16:09:13 发布

阅读量498

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liqi-0126/p/10286506.html

版权

最近做公司官网，左边文章列表，右边文章详情，要求左边文章列表随着页面向上滚动到某个位置时，固定在页面顶部，当滚动到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>