CODEWITHSUNDEEP
jquerycsspositioning
Anon
Anon

Reputation: 94

Preventing content div from overlapping fixed position sidebar when resizing browser

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

Upvotes: 0

Views: 1243

Answers (2)

Jai
Jai

Reputation: 74738

Try this one:

See the fiddle and try this out with horizontal scrollbar

Consider a fullscreen preview

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

initially required:

#right {
   width: 150px;
   position: fixed;
   left:50px;        /* <-----initially required*/
}

Upvotes: 0

andri
andri

Reputation: 1021

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.

Upvotes: 1

Related Questions