在Bootstrap中滾動時修復了側邊欄

Question

因此，我希望在顯示側邊欄底部內容時，我的左側側邊欄能夠固定，並在滾動至頁腳時保持固定。 然后，每當您向上滾動時，當側邊欄的TOP到達頂部時，側邊欄將保持固定。 我可以為此使用Bootstrap詞綴嗎？ 就是這樣（左側邊欄行為）： http : //www.spelbloggare.se/

非常感謝您的幫助，我不知道是否將所有代碼都粘貼到這里（太多了），但是我有頁眉，側邊欄，內容和頁腳。

Answer 1

看到這個：

 $( document ).ready(function() { console.log( "document ready!" ); var $sticky = $('.sticky'); var $stickyrStopper = $('.sticky-stopper'); if (!!$sticky.offset()) { // make sure ".sticky" element exists var generalSidebarHeight = $sticky.innerHeight(); var stickyTop = $sticky.offset().top; var stickOffset = 0; var stickyStopperPosition = $stickyrStopper.offset().top; var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset; var diff = stopPoint + stickOffset; $(window).scroll(function(){ // scroll event var windowTop = $(window).scrollTop(); // returns number if (stopPoint < windowTop) { $sticky.css({ position: 'absolute', top: diff }); } else if (stickyTop < windowTop+stickOffset) { $sticky.css({ position: 'fixed', top: stickOffset }); } else { $sticky.css({position: 'absolute', top: 'initial'}); } }); } }); 

 .container { width: 1000px; position: relative; } .header { clear: both; margin-bottom: 10px; border: 1px solid #000000; height: 90px; } .sidebar { float: left; width: 350px; border: 1px solid #000000; } .content { float: right; width: 640px; border: 1px solid #000000; height: 800px; } .footer { clear: both; margin-top: 10px; border: 1px solid #000000; height: 820px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <div class="container"> <div class="header"> This is header </div> <div class="sidebar sticky"> This is side bar </div> <div class="content"> This is main content </div> <div class="footer"> <div class="sticky-stopper"></div> This is my footer </div> </div> 

Answer 2

這是一個最小的示例。 在此示例中，您將需要jQuery。

 $(function() { var sidebar = $('.sidebar'); var top = sidebar.offset().top - parseFloat(sidebar.css('margin-top')); $(window).scroll(function(event) { var y = $(this).scrollTop(); if (y >= top) { sidebar.addClass('fixed'); } else { sidebar.removeClass('fixed'); } }); }); 

 /* -- Needed things -- */ /* top margin on sidebar */ .sidebar, .content { margin-top: 20px; } /* fixed sidebar which will be added from JS */ .fixed { position: fixed; top: 0; } /* -- Code below is only for example -- */ * { box-sizing: border-box; } body { margin: 20px; } p { padding: 5px; margin: 0; } .nav { width: 100%; height: 20px; border: green 2px solid; } .content { width: 70%; border: 2px solid green; float: right; } .sidebar { width: 100px; height: 300px; float: left; border: 2px solid red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="nav">Navigation</div> <div class="sidebar">Sidebar</div> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis diam sed risus aliquet, in vestibulum neque lacinia. Ut nec consequat dolor. Aenean venenatis justo nec sagittis lacinia. Quisque metus tortor, porta quis nulla sit amet, dictum facilisis orci. Quisque ipsum dui, feugiat a lorem venenatis, interdum porttitor lacus. Sed ac augue vitae tellus fringilla tincidunt. In id ultrices erat. Vestibulum ut suscipit massa, ac pulvinar erat. Duis in accumsan eros. Ut elementum accumsan libero consectetur scelerisque. Mauris ut turpis id nibh iaculis egestas eget ornare risus. Donec justo tellus, rutrum et euismod eleifend, eleifend vel augue. Quisque vulputate mi ut ante aliquet, ut molestie orci rutrum. Donec molestie, mauris vitae accumsan venenatis, felis turpis tempor erat, sit amet euismod est dui vel libero. Nunc sed turpis nec ipsum tristique porta. Ut viverra sollicitudin velit. Fusce ac ante ac nunc posuere tempus. Aenean aliquet lacus arcu, id tristique lacus tempor at. In vel enim dolor. Sed sed sem quam. Pellentesque scelerisque malesuada quam in tempus. Pellentesque commodo vestibulum varius. Suspendisse in sollicitudin magna. Aenean condimentum, quam non rhoncus hendrerit, augue augue cursus nulla, ut commodo dolor justo in orci. Vivamus auctor vitae dolor at porttitor. Praesent euismod pellentesque sollicitudin. Phasellus blandit adipiscing dictum. Etiam hendrerit scelerisque quam nec suscipit. Mauris elit orci, facilisis ut fermentum ac, consequat vel nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis diam sed risus aliquet, in vestibulum neque lacinia. Ut nec consequat dolor. Aenean venenatis justo nec sagittis lacinia. Quisque metus tortor, porta quis nulla sit amet, dictum facilisis orci. Quisque ipsum dui, feugiat a lorem venenatis, interdum porttitor lacus. Sed ac augue vitae tellus fringilla tincidunt. In id ultrices erat. Vestibulum ut suscipit massa, ac pulvinar erat. Duis in accumsan eros. Ut elementum accumsan libero consectetur scelerisque. Mauris ut turpis id nibh iaculis egestas eget ornare risus. Donec justo tellus, rutrum et euismod eleifend, eleifend vel augue. Quisque vulputate mi ut ante aliquet, ut molestie orci rutrum. Donec molestie, mauris vitae accumsan venenatis, felis turpis tempor erat, sit amet euismod est dui vel libero. Nunc sed turpis nec ipsum tristique porta. Ut viverra sollicitudin velit. Fusce ac ante ac nunc posuere tempus. Aenean aliquet lacus arcu, id tristique lacus tempor at. In vel enim dolor. Sed sed sem quam. Pellentesque scelerisque malesuada quam in tempus. Pellentesque commodo vestibulum varius. Suspendisse in sollicitudin magna. Aenean condimentum, quam non rhoncus hendrerit, augue augue cursus nulla, ut commodo dolor justo in orci. Vivamus auctor vitae dolor at porttitor. Praesent euismod pellentesque sollicitudin. Phasellus blandit adipiscing dictum. Etiam hendrerit scelerisque quam nec suscipit. Mauris elit orci, facilisis ut fermentum ac, consequat vel nisl. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mollis diam sed risus aliquet, in vestibulum neque lacinia. Ut nec consequat dolor. Aenean venenatis justo nec sagittis lacinia. Quisque metus tortor, porta quis nulla sit amet, dictum facilisis orci. Quisque ipsum dui, feugiat a lorem venenatis, interdum porttitor lacus. Sed ac augue vitae tellus fringilla tincidunt. In id ultrices erat. Vestibulum ut suscipit massa, ac pulvinar erat. Duis in accumsan eros. Ut elementum accumsan libero consectetur scelerisque. Mauris ut turpis id nibh iaculis egestas eget ornare risus. Donec justo tellus, rutrum et euismod eleifend, eleifend vel augue. Quisque vulputate mi ut ante aliquet, ut molestie orci rutrum. Donec molestie, mauris vitae accumsan venenatis, felis turpis tempor erat, sit amet euismod est dui vel libero. Nunc sed turpis nec ipsum tristique porta. Ut viverra sollicitudin velit. Fusce ac ante ac nunc posuere tempus. Aenean aliquet lacus arcu, id tristique lacus tempor at. In vel enim dolor. Sed sed sem quam. Pellentesque scelerisque malesuada quam in tempus. Pellentesque commodo vestibulum varius. Suspendisse in sollicitudin magna. Aenean condimentum, quam non rhoncus hendrerit, augue augue cursus nulla, ut commodo dolor justo in orci. Vivamus auctor vitae dolor at porttitor. Praesent euismod pellentesque sollicitudin. Phasellus blandit adipiscing dictum. Etiam hendrerit scelerisque quam nec suscipit. Mauris elit orci, facilisis ut fermentum ac, consequat vel nisl. </p> </div>