Question

So I have a simple example of my problem hosted on http://linenwoods.com/random/this.html

The problem is that the sidebar is using position: fixed; and is thus is dependent on the size of the viewport. When I shrink the browser and use the horizontal scroll-bar, the main content div overlaps the sidebar. I’m trying to use jQuery to adjust the positioning of the sidebar when the horizontal scroll bar is used when shrinking the browser.

The bit of jQuery I’m using to try and solve the problem:

$(document).scroll(function(e) {
  $('#right').css({
    'left': 0 - $(document).scrollLeft()
  });
});

The jQuery almost works, BUT because the fixed positioning left/right/top/bottom values depend on the viewport width/height I cannot give this little function some auto value to calculate the viewport width .. is this something thats easy to fix or would it required a ridiculous amount of code? I’m new to jQuery so it’s hard to dive into the documentation and find exactly what I need. All I’m looking for is a step in the right direction.

Any help would be greatly appreciated,

Thanks in advance

Answer 1

If you simply don’t want it to ‘jump’, you can try specify left:0 for your #right in your CSS.

This will make the layout slightly change though, but it should remove the ‘jump’ effect.