I am working on a responsive two-column website with a fixed sidebar that changes its position when scrolling. Here is the CSS styling:
#sidebar {
padding: 5px;
width: 200px;
float: left;
background-color: yellow;
}
.fixed {
position: fixed;
padding: 5px;
background-color: yellow;
}
.span8 {
padding: 5px;
width: 400px;
float: left;
background-color: blue;
}
For the JavaScript functionality: var position = $('#sidebar').position(); var offset = $("#sidebar").offset();
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$('#sidebar').addClass('fixed');
$('.fixed').css("top", 0);
$('.fixed').css("left", position.left);
}
else {
$('#sidebar').removeClass('fixed');
}
});
Below is the HTML structure:
Welcome to My Website
<div class="span8">
<h4>Main Content Area</h4>
<p> Your main content goes here... <p>
</div>
<div id="sidebar">
<h4>Hello!</h4>
<p>This is a fixed sidebar that becomes fixed on scroll.</p>
</div>
While everything works fine, you can view it in action on jsfiddle here. However, one issue remains - when resizing the window, the sidebar maintains its original horizontal position. I am struggling to make it responsive on resize. Any guidance on this matter would be highly appreciated!
I find it frustrating that jsfiddle displays it perfectly but the actual browser implementation is different. Your assistance would be greatly valued.
Sincerely, Lennart