Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    spa
    spa is offline
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Floating menu problem

    I am trying to make a floating menu that is wider than the screen. Some of the columns are to the right of the screen and whenever I try to scroll over to the right, the menu is stuck with the position:fixed so I can't see the columns that are off the screen.

    <div class="floating-menu" style="position:fixed;top:0px;left:45px">
    Menu text
    </div>

    I want the menu to remain position:fixed for when I scroll up and down, but not when I move left or right because the menu is very wide.

    Is there anyway to do this?

    Thank you,
    -spa

  • #2
    Regular Coder
    Join Date
    Dec 2011
    Posts
    201
    Thanks
    12
    Thanked 26 Times in 26 Posts
    How wide is wide? I would say any menu, including your logo, wider than 1000px at the maxxxxxxxx is way to wide, most people browse at like 800pxish.

    With that being said there is no practical (or pleasing way for the user) to scroll right or left to view a fixed element, that I know of.

    my preferred method is...

    PHP Code:
    #header {
    font-size12px;
        
    letter-spacing0.15em;
        
    line-height24px;
        
    padding8px 0;
        
    positionfixed;
        
    text-transformuppercase;
        
    width100%;
        
    z-index10;
        
    margin:0 auto;
        
    text-align:center;


    with a width of 100% so my nav stays centered.

    good luck

  • #3
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    911
    Thanks
    0
    Thanked 120 Times in 119 Posts
    make your div position:absolute, give it an id,
    and run this:
    Code:
    window.onscroll=function(){document.getElementById('YourID').style.top=document.body.scrollTop;}
    when the document is loaded.
    Last edited by Lerura; 02-28-2012 at 09:41 PM.

  • #4
    spa
    spa is offline
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by SeattleMicah View Post
    How wide is wide? I would say any menu, including your logo, wider than 1000px at the maxxxxxxxx is way to wide, most people browse at like 800pxish.

    With that being said there is no practical (or pleasing way for the user) to scroll right or left to view a fixed element, that I know of.

    my preferred method is...

    PHP Code:
    #header {
    font-size12px;
        
    letter-spacing0.15em;
        
    line-height24px;
        
    padding8px 0;
        
    positionfixed;
        
    text-transformuppercase;
        
    width100%;
        
    z-index10;
        
    margin:0 auto;
        
    text-align:center;


    with a width of 100% so my nav stays centered.

    good luck
    It's about 1400 pixels. It's for a wide excel table that contains many columns. Thank you though.

  • #5
    spa
    spa is offline
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by lerura View Post
    make your div position:absolute, give it an id,
    and run this:
    Code:
    window.onscroll=function(){document.getElementById('YourID').style.top=document.body.scrollTop;};}
    when the document is loaded.
    I need to put that inbetween javascript tags, correct?
    And where in the html code should it go?

  • #6
    Regular Coder Lerura's Avatar
    Join Date
    Aug 2005
    Location
    Denmark
    Posts
    911
    Thanks
    0
    Thanked 120 Times in 119 Posts
    Quote Originally Posted by spa View Post
    I need to put that inbetween javascript tags, correct?
    And where in the html code should it go?
    if you use <body onload=""> then paste this into the <head>:
    Code:
    <script>
    function InitScroll(){
    window.onscroll=function({document.getElementById('YourID').style.top=document.body.scrollTop;}
    }
    <script>
    and then:
    Code:
    <body onload="InitScroll()">
    you can also insert it in a jQuery document-ready
    Last edited by Lerura; 02-28-2012 at 09:43 PM.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •