Hey guys,
I was working on my first horizontal website and finished it. I tried looking at it on my friend’s macbook to see how it would do in small screen. Turns out I seemed to have designed it a bit too large vertically, which shouldn’t be a problem right?
Except I have a fixed menu at the top, and when scrolling down… it gets ugly…
Is there anyway to have an element fixed horizontally but be able to move up and down when scrolling vertically? Or any other solutions?
Here’s the website now: www.modarts.org
I’d appreciate any advice you guys got! Please help me!
Hi there,
Yes, there’s a few issues with that site:
When there’s a vertical scroll bar the logo/menu separate from the red bar breaking the design.
I use the trackpad to scroll and having it scroll in both axis feels loosey goosey.
Double scrollbars are one of the great evils on the web.
There’s no unique URL’s for the pages so you can’t link to your content.
If it were me I would split out the content on to separate pages for unique urls and lose the iframes.
I don’t think the scrolling content works for the whole site. If there’s a gallery you could make the effect work well.
If you want to go with horizontally scrolling make it work at any height.
Hey,
Thanks for the response. Yes you’re describing the exact problem I am facing. The goal of the website was to be a horizontal one. I was looking at some other horizontally aligned sites to see what happens when you decrease the browser size vertically… some will have the content scroll under the menu, etc.
I’m thinking of just decreasing the site of the content vertically to maybe avoid the problem.
Looking for some clues. Somebody posted this to have handling the fixed element:
<script type=“text/javascript”>
function handleScroll()
{
document.getElementById(‘fixed-element’).style.top = “-”+document.body.scrollTop+“px”;
}
</script>
I tried it but it didn’t seem to work. Maybe because I already have some javascript handling the sideways scrolling ability?