如何讓DIV模塊隨著頁面固定和不固定隨意切換
阿新 • • 發佈：2019-01-18
con lan auto pos top 隨著 源代碼 gin scrip
最近做公司官網，左邊文章列表，右邊文章詳情，要求左邊文章列表隨著頁面向上滾動到某個位置時，固定在頁面頂部，當滾動到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模塊隨著頁面固定和不固定隨意切換