4

HTML

<div id="header">
    <ul id="nav">
       <li><a id="ho" href="#spread1-anchor">Home</a> /</li>
       <li><a id="bg" href="#spread2-anchor">Background</a> /</li>
       <li><a id="ap" href="#spread3-anchor">Approach</a> /</li>
       <li><a id="se" href="#spread9-anchor">Services</a> /</li>
       <li><a id="cl" href="#spread10-anchor">Clients</a> /</li>
       <li><a id="co" href="#spread11-anchor">Contact</a></li>
    </ul>
</div>

<div id="container">
<!-- Very wide horizontal scrolling content-->
</div>

CSS

#header {
width: 100%;
position: fixed;
top: 0;
left: 0;
}
#container {
width: 8000px;
height: 590px;
/*etc*/
}

Using the above code, I have a very wide #container that scrolls horizontally, using ScrollTo.js. And the #header that controls it is in a fixed position, as I don't want it to scroll with the rest of the page/container. My problem is, that if you resize the windonw vertically, the container hides underneath the #header due to it fixed position.

Can the #header be fixed horizontally, but still scroll vertically? Using jQuery or CSS?

My live example is here: http://www.kargo2.com/Stackover/

Thanks.

Karlgoldstraw
  • 618
  • 2
  • 11
  • 25
  • 1
    why don't you use jscrollpane , http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html – kobe Nov 07 '10 at 16:45
  • you can play with overflow-x , overflow-y property... – kobe Nov 07 '10 at 16:45
  • scrollpane looks interesting. Overflow-x & -y have limited support in Pre FF3.5 which i think will cause a problem for a lot of viewers. Thanks for the suggestion though. – Karlgoldstraw Nov 07 '10 at 17:40

2 Answers2

2

Try this fairly simple option:

$(window).scroll(function(){
    $('#header').css({
        'top': $(this).scrollTop() + 15
    });
});

Along with:

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

I've added a 15px offset top and left to show you how to do an offset, but you can delete these parts if you want the element tight in the corner of the view pane.

lonesomeday
  • 233,373
  • 50
  • 316
  • 318
  • Actually, just checked this in FF, and the menu now shakes like crazy whilst scrolling, is there a problem with this code in FF that you can think of? – Karlgoldstraw Nov 07 '10 at 19:09
  • Hi Lonesomeday my link is: http://www.kargo2.com/Stackover/ I've been googling it all night, seems there's a problem with FF and ScrollTo.js, which can be sorted by "resetting default behaviour in the click function" according to some, but not sure where that sits in my code... – Karlgoldstraw Nov 07 '10 at 22:45
  • @Karlgoldstraw I think this just shows a difference in the ways that Firefox and Chrome deal with scrolling, and perhaps a difference in the speeds of their JS engines. It might be better in FF4. To compensate, you could do `$('#header').animate({top: $(this).scrollTop()}, 'fast');` This should make the transition look a bit more deliberate. – lonesomeday Nov 07 '10 at 23:32
  • @lonesomeday - Hi, following on from your answer above, the answer you gave is working great on a left/right basis, but how would i change this to an up/down instead? An example of your original suggestion is here www.kargo2.com/Stackover/ - thanks! – Karlgoldstraw Dec 04 '10 at 17:49
  • @Karlgoldstraw `$('#header').animate({left: $(this).scrollLeft() + 15}, 'fast');` should do the trick. – lonesomeday Dec 04 '10 at 20:57
  • @lonesomeday - I've been playing around with all the code you've given me and I have a solution that works great in Safari and Chrome, but shakes really badly in FF and IE when I scroll left. I have no idea why! :( http://www.kargo2.com/Stackover/ ...See my progress – Karlgoldstraw Dec 04 '10 at 22:25
  • BTW - the code that is working for me is from your original answer. – Karlgoldstraw Dec 04 '10 at 22:42
0

Just change the position from fixedto absolute and keep top: 0; left:0;

Jacob McDonald
  • 41
  • 4
  • But then the `#header` will scroll left with the rest of the page. I want it to scroll up and down with the page but not left and right. – Karlgoldstraw Nov 07 '10 at 17:34