jQuery(或CSS3)在滚动的内容部分之间切换

时间:2013-07-31 12:23:17

标签: jquery html5 css3 css-transitions

我希望你能指出我正确的方向。

我想复制导航,类似于本网站上的导航: http://vsamarehorosho.ru/

基本上,我们的想法是您不允许用户同时将网站的不同部分放在屏幕上。 因此,如果该部分大于屏幕,则会滚动直到您到达该部分的底部。如果进一步滚动,则跳到下一部分。

如果部分小于屏幕尺寸,您将看到顶部的主要部分和底部的下一部分,但是当您尝试滚动时,下一部分会跳到顶部,而后面部分会显示只有当这个小于屏幕尺寸时才会在底部。

在该示例中,所有幻灯片都是100%高度,但这并不总是可以实现。

希望你能帮助我。

3 个答案:

答案 0 :(得分:0)

将所有部分包装在高度为100%的div中;

这样, 如果section低于100%高度,则包装器将帮助确保页面上只显示一个部分。 如果部分高度超过100%,则滚动可以在包装器上进行,而不是在页面上进行。

答案 1 :(得分:0)

尝试使用固定高度(以像素为单位)。确定“最高”div的必要高度,并将所有div设置为该高度。这可能会在某些div上留下一些空格,但会确保一次只能看到一个div。

然后,您可以使用在线提供的许多“滚动到”脚本之一,并创建每个部分的导航链接。 Ariel Flesler的scrollto.js就是一个很好的例子。 http://flesler.com/jquery/scrollTo/

M.J。 5150设计

答案 2 :(得分:-1)

我创建了一个可以实现的库。 (fullpage.js)

它甚至适用于较小的部分。