I have a div whose position has been fixed. Everything is fine till the window is re-sized. On re-size, when we scroll to the rightmost part of the webpage, the fixed div still remains at the left-most end of screen. I wish it to scroll left along with the window, but not scroll down along with the window.

If I am unclear in expressing my doubt. You can have a live demo here.

Search for any product say Apple Ipod Touch there. Once the results are displayed , resize window and scroll to rightmost part .

Can anyone suggest some CSS or Javascript to resolve the same.

Thanks !

• javascript
• css
• css-position

I would restructure your layout and remove position fixed. For example something like this. Obviously this isn't exactly like your code. But the concept is the same. If you have your div with the control inside of the same container as the results and the history, it should then move with it.

#wrapper {
width:960px;
margin:0 auto 0 auto;
}

#left-col,
#right-col {
width:100px;
float:left;
}

#mid-col {
width:710px;
float:left;
}

<!-- holds your column containers -->
<div id="wrapper">

<!-- your control -->
<div id="left-col"> 
</div>

<!-- your search results -->
<div id="mid-col"> 
</div>

<!-- your history -->
<div id="right-col"> 
</div>

</div>

Either use CSS Media Queries or Javascript. A quick way is on Jquery $(window).resize method.

I think you just need to remove

position: fixed from #completeSlider

at least that worked for me on chrome.

EDIT:

then I'd say you need to use JQuery to handle this. You can't have both a fixed positioning and still relative to other elements. Still remove position: fixed as mentioned above and add some JQuery magic like follows:

$(window).scroll(function() {

$('#completeSlider').offset({ top: $(window).scrollTop(), left: 0});

});

Seems like the standard $ for jQuery is reserved for some other function on your page... try this:

jQuery(window).scroll(function() {

    jQuery('#completeSlider').offset({ top: jQuery(window).scrollTop(), left: 0});

});