Question

晚安，早上，下午......

我正在开发一个网站，整个内容上下滑动......我已经想到很多可能但仍然找不到答案。请注意，index / intro / main页面是第二部分。我的灵感来自：

http://www.pulpdesign.it/

提前谢谢。



<section class="tips-content">
        </section>

        <section id="intro">
            <h1 id="intro-logo">bla</h1>
                <span id="title">blabla</span>
                <nav id="navigation">
                    <a href="#" id="go_curriculum"><span class="curriculum"></span><span id="curriculum">currículo</span></a>
                    <a href="#" id="go_contact"><span id="contact">agendamento</span><span class="contact"></span></a>
                    <a href="#" id="go_services"><span id="services">serviços</span><span class="services"></span></a>
                    <a href="#" id="go_tips"><span id="tips">dicas</span><span class="tips"></span></a>
                </nav>
        </section>

        <section id="curriculum-content">
            <div style="height:100%; background:red;">
            </div>
        </section>

        <script>
            $(document).ready(function(){


                $("#go_curriculum").click(function(){
                    $(".tips-content").slideDown("slow");
                });

                $("#go_tips").click(function(){

                    $("#curriculum-content").slideUp("slow");


                });

            });
        </script>
</body>

<section class="tips-content"> </section> <section id="intro"> <h1 id="intro-logo">bla</h1> <span id="title">blabla</span> <nav id="navigation"> <a href="#" id="go_curriculum"><span class="curriculum"></span><span id="curriculum">currículo</span></a> <a href="#" id="go_contact"><span id="contact">agendamento</span><span class="contact"></span></a> <a href="#" id="go_services"><span id="services">serviços</span><span class="services"></span></a> <a href="#" id="go_tips"><span id="tips">dicas</span><span class="tips"></span></a> </nav> </section> <section id="curriculum-content"> <div style="height:100%; background:red;"> </div> </section> <script> $(document).ready(function(){ $("#go_curriculum").click(function(){ $(".tips-content").slideDown("slow"); }); $("#go_tips").click(function(){ $("#curriculum-content").slideUp("slow"); }); }); </script> </body>

Answer 1

我是编写该网站的开发人员:) 首先，感谢您将其作为灵感！然后，为了回答你的问题，正如CP510所说，你需要一个带有

的通用包装器

overflow:hidden; height: 100%; width: 100%

我使用了body标签，实际上并不是最好的选择，最好使用一个

在该容器内，您将拥有

的所有部分

position: absolute;
width: 100%;
height: 100%;

因为您必须为

设置动画

scrollLeft/scrollTop

使用jQuery容器的属性，并使用body作为主容器我不得不处理一些safari的错误。另一个技巧是将您的部分视为打开的多维数据集的两侧。所以你的主要部分不会在

top: 0; left: 0

但是

top: the-height-of-the-section-above-the-home;
left: the-width-of-the-section-to-the-left-of-the-home;

等等与其他部分。我希望我说得很清楚，我的英语不太好。如果您有任何其他问题，请询问！

Answer 2

查看此 EXAMPLE ，了解有关此逻辑如何运作的基本概念。

此示例包含3x2整页div（总共6页），我们根本不使用任何JavaScript，而是所有CSS和HTML。

请注意，要从页面中删除滚动条，您需要在正文样式中取消注释以下内容

body {
    white-space: nowrap;
    /*overflow:hidden;   UNCOMMENT THIS*/
}

jQuery用于平滑动画

var $root = $('html, body');
$('a').click(function () {

    $root.animate({

        scrollLeft: $($.attr(this, 'href')).offset().left,
        scrollTop: $($.attr(this, 'href')).offset().top

    }, 500);

    return false;
});

您还可以查看此Website，因为它与您想要达到的目标非常相似

Answer 3

这是一个棘手的问题。但我做到了。基本的想法是使用原始$().animate()函数来移动所有这些有趣的东西。因为向上/向下滑动只是辅助功能。

下一个要求是这些部分绝对位于包装器中。它有点不稳定，但继承了伪造的布局

<DIV THAT TAKES THE WHOLE SCREEN WITH HIDDEN OVERFLOW>
   <DIV THAT INCLUDES ALL THE SECTIONS POSITIONED ABSOLUTE>
       <CONTENT DIVS POSITIONED CORRECTLY>
   </DIV>
<DIV>

现在你要做的是移动绝对定位的内容容器（第二个div）以使用jquery显示该部分。

$('#content-container').animate({top: POSITION_TOP+'px',left: POSITION_LEFT+'px'},'slow',cleanup_callback);

现在POSITION_TOP和POSITION_LEFT占位符可以是一个根据点击的导航按钮设置的变量。如果您希望在文档到达该位置时发生某些事情，则cleanup_callback是一个可选功能。

这就是jQuery方式。通过使用类和转换有一种CSS方式。它的工作原理是更改hold容器类，基本上声明目标页面的位置，然后因为CSS转换打开，动画就会动画化。这些“导航类”中的每一个基本上只是指示顶部和左侧位置属性。

JQuery slideUp和slideDown整个<section> </section>

3 个答案: