如何让DIV模块随着页面固定和不固定随意切换
Posted liqi-0126
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何让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>
以上是关于如何让DIV模块随着页面固定和不固定随意切换的主要内容，如果未能解决你的问题，请参考以下文章