jquery fixing a side bar while scrolling, until bottom
Solution 1
I think your script is working fine, probably the problem is on your CSS. In order to properly contain a position:absolute;
element you should set its parent element ('#wrapper'
) to position:relative
.
See the demo on this jsfiddle: jsfiddle.net/J62Cp/
Solution 2
I have a similar setup. I needed a "sticky" div that started at the top of the content section (300px below the top of the page, due to the header), was fixed while I scrolled down, but stopped when I got to a certain point (the footer). With pure CSS, the sticky div was going behind my footer after I got to the bottom. Your code got me going in the right direction, but here's the changes I made for my use case:
$(document).ready(function () {
var length = $("#left").height() - $("#sidebar").height();
$(window).scroll(function () {
var scroll = $(this).scrollTop();
var height = $('#sidebar').height() + 'px';
if(scroll <= 0) {
$("#sidebar").css({
'position': 'absolute',
'top': '0'
});
} else if(scroll >= length) {
$("#sidebar").css({
'position': 'absolute',
'bottom': '0',
'top': 'auto'
});
} else {
$("#sidebar").css({
'position': 'fixed',
'top': '300px'
});
}
});
});
Solution 3
Do you want fixed positioned sidebar or sidebar with height = to main content part???? if you want height of sidebar equals to main content part, then this may help you..
$(function(){
var mainHeight = $('.right').height();
$('.left').css({
'height':mainHeight
});
});
Francis Chibaye
Updated on December 13, 2020Comments
-
Francis Chibaye over 3 years
This code is taken from waypointarts.com and it's suppose to create a Fixing a side bar while scrolling, until bottom. problem is when right div is populated the left div's height even though set to 100# stay fixed to certain height, window/screen or something. how can I set it so its 100% height or equivalent to right div's height.
HTML Header
<div id="wrapper"> <div id="left"> <div id="sidebar"> Sidebar Content </div> </div> <div id="right"> This is the text of the main part of the page. </div> <div class="clear"></div> </div> <div id="footer">Footer</div>
CSS
#header { background: #c2c2c2; height: 50px } #wrapper { width: 500px } #left { background: #d7d7d7; position: absolute; /* IMPORTANT! */ width: 150px; height: 100% } #right { position: relative; width: 350px; float: right } #sidebar { background: #0096d7; width: 150px; color: #fff } .clear { clear: both } #footer { background: #c2c2c2 }
JAVASCRIPT
$(document).ready(function () { var length = $('#left').height() - $('#sidebar').height() + $('#left').offset().top; $(window).scroll(function () { var scroll = $(this).scrollTop(); var height = $('#sidebar').height() + 'px'; if (scroll < $('#left').offset().top) { $('#sidebar').css({ 'position': 'absolute', 'top': '0' }); } else if (scroll > length) { $('#sidebar').css({ 'position': 'absolute', 'bottom': '0', 'top': 'auto' }); } else { $('#sidebar').css({ 'position': 'fixed', 'top': '0', 'height': height }); } }); });
Image from waypoitsarts.com: