javascript breaking css

I am using the following to hold a menu in place vertically but not horizontally:

<script type='text/javascript'>
    var $win = $(window);
    $('#widget_sp_image-53').css('left', 0 -$win.scrollLeft());
	$('#nav_menu-6').css('left', 0 -$win.scrollLeft());
	$('#nav_menu-5').css('left', 0 -$win.scrollLeft());

Open in new window

It works purfect, unless I maximize my screen and scroll down  then the three divs land 100% justified left on the edge of my screen.

I'm using this example  and it breaks when I use it.
Who is Participating?
GreggConnect With a Mentor Commented:
Are you trying to subtract win.scroll left from 0? which results in a negative number. Should it be 20 - $win.scrollleft as shown in jsfiddle?

It would be interesting to know which browser does this behavior. In the jsfiddle the first box lands as you change the css values to 0 top 0 and the second box left 0 on maximizing. This is because of the css values you changed to 0 instead of 20 in the jsfiddle example.

This is in Firefox 6. Which browser do you use? Do you use the example in another context, then post the context.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.