所以我希望我的左側邊欄在顯示側邊欄底部內容時進行修復，並在滾動時保持固定，直到頁腳爲止。然後，無論何時向後滾動，邊欄的頂部到達頂部時，側邊欄都將保持固定。 我能爲此使用Bootstrap詞綴嗎？ 這是完全這樣的（左邊欄行爲）：http://www.spelbloggare.se/在Bootstrap滾動期間修復側邊欄
我非常感謝任何幫助，我不知道是否要粘貼我的所有代碼（這是如此之多），但我有一個標題，側邊欄，內容和頁腳。
看到這個：
$(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>https://jsfiddle.net/uhxe97z5/ – Vishnu
這裏是你如何能做到這一點小例子。這個例子你需要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>
是可以張貼的CSS，只有你使用側導航類？ –