Question

I have a quick jQuery/css question. I am coding a site and have a grey box that will have content/links inside of it that I want to stick to the left side of the screen when the user scrolls right. I’ve gone through a bunch of forums/tutorials but still can’t find my solution. Here is a link to the site.

I’m rather a novice when it comes to jQuery so any help would be greatly appreciated, thanks!

http://morseandcompany.com/index-TEST.html

Answer 1

EDIT:

This should be your document ready script:

$(document).ready(function() 
{
    var theLoc = $('#sidebar').position().left;
    $(window).scroll(function() {
    if(theLoc >= $(window).scrollLeft()) {
        if($('#sidebar').hasClass('fixed')) {
            $('#sidebar').removeClass('fixed');
        }
    } else { 
        if(!$('#sidebar').hasClass('fixed')) {
            $('#sidebar').addClass('fixed');
        }
    }
});
});

Add this to your CSS:

.fixed {position:fixed !important; left:0px !important;}

And change the CSS for your #sidebar to:

#sidebar {
min-height:100%;
width:266px;
height:100%;
height: auto !important; /*for modern browsers */ 
background-color:#F2F2F2;
z-index:2;
} 

And change the HTML for the sidebar to:

<DIV ID="sidebar" style="position:absolute; left:765px;"></DIV>