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