javascript breaking css

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

<script type='text/javascript'>
$(window).scroll(function(){
    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());
});
</script>

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 http://jsfiddle.net/Q4dWz/  and it breaks when I use it.
LVL 7
rgranlundAsked:
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?

0
 
mcnuteCommented:
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.
0
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.