Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 334
  • Last Modified:

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?
0
rgranlund
Asked:
rgranlund
  • 4
  • 4
1 Solution
 
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
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
rgranlundAuthor Commented:
0
 
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:
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

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 4
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now