[Webinar] Streamline your web hosting managementRegister Today

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

CSS fixed positions

I have asked this question before but the answer did not hold up.

I have a menu on the left side of my website that has a fixed position.  So, no matter how far I scroll up or down the page, the menu is always in the same place on the left side of page.  However, If I change the size of my screen and scroll horizontally,  it will begin to overlap the content of the page. it slides under the other content.

Is there a way to keep a div fixed vertically but not fixed horizontally so it can move with the entire page as you scroll right and left?
0
rgranlund
Asked:
rgranlund
  • 4
  • 2
1 Solution
 
LZ1Commented:
Unfortunately not really. Not with pure CSS anyways. You may need a custom Javascript solution.
0
 
rgranlundAuthor Commented:
@LZ1  like what?  any clues that can put me in the correct direction?
0
 
LZ1Commented:
I've been looking, but haven't seen any type of solution.  Let me make sure I have the right thing in mind though. Your talking about having a fixed div on the left hand side. The everything else on the right. When a user has to scroll horizontally though, it should move as if it's part of the page?

What about something like framesets? http://www.w3schools.com/tags/tag_frameset.asp
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
rgranlundAuthor Commented:
@LZ1  Yes that is correct but the frameset is not a good choice at this point.
0
 
LZ1Commented:
Understandable. I wouldn't want to use it either honestly.  

Have you seen any place this is done before? We may be able to take a sneak peek at their code to see how it can be done.
0
 
LZ1Commented:
I just found this and tested. For the fixed-element, just insert the ID of whatever div your trying to target.
<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

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

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