试图创建一个水平的网站。这个想法是使导航和页脚部分保持静态,而正文可以向左/向右滚动。

Here is an example.

但是,这并不是我所需要的。这将滚动整个页面,并且导航栏是固定的。

这是我想要实现的样机布局:



并且如果用户单击正文页面的导航2:



因此,我从上方的那个网站开始通过Chrome中的Inspect Element测试,我尝试了以下CSS:

body { max-width: 1000px; overflow: hidden; }
.panel { display: inline; }


我以为可以解决问题,但这只是使整个页面垂直。因此,然后我添加了div id="top"来封装home newsletter directions contact和CSS:

body { max-width: 1000px; overflow: hidden; }
.panel { display: inline; }
#top { width: 10000px }


哪个也没成功!

理想情况下,我希望页面完全无法滚动,并且仅当用户单击导航链接时才能向左/向右动画/滚动。

有任何想法吗?

谢谢。

最佳答案

只是给出一个想法,您可以使用css3 transform属性来执行此操作。

将每个页面的内容保留在div中,将其翻译为100%,以便在要显示时将其移出视口,将其翻译回0%

或将其缩放为0,然后在要显示时将其缩放为1。

您必须使用position z-index

也许像这样FIDDLE

07-24 09:50
查看更多