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

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

转载于:https://www.cnblogs.com/liqi-0126/p/10286506.html

如何让DIV模块随着页面固定和不固定相关推荐

html元素在模块中心显示,DW怎么设置DIV模块在页面中居中 DW如何设置网页打开绝对居中？...
Dreamweaver(DW)中的div层怎么居中 Dreamweaver中div怎么页面居中? Dreamweaver中div怎么页面居中?我写的DIV都是靠左,怎么让它页面居中?在.header的 ...
CSS+DIV进行的页面布局
CSS+DIV进行的页面布局第一部分.布局概述 1.网页布局 2.页面元素定位机制第二部分.布局常用属性 1.浮动属性(float) 2.清除浮动(clear) 3.定位属性(position) ...
html高度没有滚动条,Div扩展了页面高度，但没有滚动条
我在页面左侧有一个div用于导航链接.点击标题可展开链接的子集.我将此div设置为页面高度的100%,以便列占据页面的整个左侧.当所有子类别都展开时,会出现问题. div的内容在页面底部运行,但不添加 ...
div css 登录页面布局,DIV+CSS页面布局
页面布局设计一.三行模式或三列模式特点:把整个页面水平.垂直分成三个区域. 三行模式:将页面分成头部.主体及页脚三部分三列模式:将页面分成左.中.右三个部分在CSS文件里: 1.三行模式代码 ...
使用半透明的DIV实现禁用页面功能
实现功能:弹出一个DIV层提示等待信息,这个时候禁用用户操作页面中的其他内容. 弹出DIV: <div id="divWaiting" style="display ...
php 底部页面层,html 设置页脚div一直在页面底部
先上代码 //这部分的div的 position 是 fixed 解析: 1.先设置的 height 为 100%: 2.设置 body 的position 为 absolute,因为它里面的 div ...
使用hover给div加边框，出现div晃动和页面布局发生混乱的解决办法
** 使用hover给div加边框,出现div晃动和页面布局发生混乱的原因: 因为给div设置的border的宽度,使得div的宽度增加,撑开了其他的div 解决办法: (1)在给div设置hover ...
html 在div 底部显示不出来,html 设置页脚div一直在页面底部
先上代码 //这部分的div的 position 是 fixed 解析: 1.先设置的 height 为 100%: 2.设置 body 的position 为 absolute,因为它里面的 div ...
“书籍列表模块”前端页面作品评审「在线实习·推推」
大家好,欢迎来到小拿知识分享栏目~ 在线实习是大拿老师为了正在准备校招的IT同学带来的免费项目,每期一个主题,业务模式简单且项目突出,适合作为校招的项目经历. 本期一起来评审一下实习生「推推」项目&q ...

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

如何让DIV模块随着页面固定和不固定相关推荐

最新文章

热门文章