Fixed Horizontal Scroll Bar

Question

Ok, so here's what I have: http://jsfiddle.net/E2U3j/

And as it's a pretty large div, I'd like to have a fixed horizontal scroll bar on the top of the window when I'm scrolling into that div, but if I'm not completely into the div (eg If the div is only visible a half,I mean if it doesn't fill the whole height of the window), the horizontal scroll bar should be in the top of the div... How would you solve this? Thanks :)

Answer 1

这段代码应该可以解决您的问题<div id="topnav" style="position:fixed; max-height:x; overflow-y:scroll;"></div>那么您顶部导航栏的内容就可以在其自身内滚动固定在页面顶部

Answer 2

Try jQuery Scrollbar with external scrollbar (available on advaced scrollbars demo page) - scrollbar can be placed in any part of your page, you can hide/show it, make it fixed, etc...

The one thing you need is to handle window scroll and check current scroll position, compare it to your container offset and if it's greater - make scrollbar fixed, if not - change position to absolute (in case when scrollbar is inside of your container).