asked on

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?

hankknight

These links may help:

http://jqueryfordesigners.com/fixed-floating-elements/
http://www.bennadel.com/blog/1810-Creating-A-Sometimes-Fixed-Position-Element-With-jQuery.htm
http://spyrestudios.com/demos/sliding-panel-fixed/

LZ1

What about the answer I gave you yesterday with Javascript?
https://www.experts-exchange.com/questions/27407230/CSS-fixed-positions.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

Robert Granlund

ASKER

@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

Robert Granlund

ASKER

@LZ

http://dev.steinbrand.com/

ASKER CERTIFIED SOLUTION

LZ1

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

LZ1

Actually it looks pretty good. It stays fixed and if I resize my browser the menu doesn't overlap the content

Robert Granlund

ASKER

@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.

LZ1

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.

Robert Granlund

ASKER

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