Div position fixed vertically only

I have been asking and looking for a solution but none seem to work.  So, I will ask the experts.  I have a div on my website the contains a menu.  I want the menu div to scroll vertically and stay in a fixed position.  However, if you scroll horizontally I need to div to scroll as if it were position absolute.

This can not be accomplished with css.  So, I need a jquery solution.  Can anyone help?
LVL 7
rgranlundAsked:
Who is Participating?
 
LZ1Commented:
Try this instead for the JS:
<script type='text/javascript'>

window.onscroll = fixedYPos( 'text-87' );

function fixedYPos( elemId )
{
  var elem = document.getElementById( elemId ),
      xInit = elem.offsetLeft,
      de = document.documentElement;
  
  return function()
  {          
    elem.style.left = xInit - ( window.pageXOffset || de.scrollLeft ) + 'px';      
  }
}

</script>

Open in new window

0
 
LZ1Commented:
What about the answer I gave you yesterday with Javascript?
http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_27407230.html

<script type='text/javascript'>

window.onscroll = fixedYPos( 'fixed-element' );

function fixedYPos( elemId )
{
  var elem = document.getElementById( elemId ),
      xInit = elem.offsetLeft,
      de = document.documentElement;
  
  return function()
  {          
    elem.style.left = xInit - ( window.pageXOffset || de.scrollLeft ) + 'px';      
  }
}

</script>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
rgranlundAuthor Commented:
@LZ

This is what I have.  MY ID is text-87.  What should the css for text-87 be?

This is what I have in the head:

<script type='text/javascript'>

window.onscroll = fixedYPos( 'fixed-element' );

function fixedYPos(text-87)
{
  var elem = document.getElementById(text-87),
      xInit = elem.offsetLeft,
      de = document.documentElement;
  
  return function()
  {          
    elem.style.left = xInit - ( window.pageXOffset || de.scrollLeft ) + 'px';      
  }
}

</script>

Open in new window

0
 
rgranlundAuthor Commented:
0
 
LZ1Commented:
Actually it looks pretty good. It stays fixed and if I resize my browser the menu doesn't overlap the content
0
 
rgranlundAuthor Commented:
@LZ If you are in FF and resize smaller and use your bottom scroll bar to scroll to the right, it goes under the other div.
0
 
LZ1Commented:
For your CSS, try this:
 
#text-87 {
    position: fixed;
    z-index: 2147483647;
}

Open in new window

However, I don't know why your going to want this either as the menu is just going to mess up the content.

If you keep it as absolute, yes the content will cover the menu, but the user will end up having to scroll back over to view the menu anyway.
0
 
rgranlundAuthor Commented:
I'm trying to do this: http://demo.rickyh.co.uk/css-position-x-and-position-y/

EXAMPLE:
My position-x is absolute but position-y is fixed.

BUT, I can't use Mootools cause conflicts with Jquery
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.