修改单页滚动功能 - 重叠而不是向上滑动

Modifying onepage scroll functionality - overlap instead of slide up

本文关键字：滚动 单页 功能 重叠 修改      更新时间：2023-09-26

嗨，我正在使用这个js库来制作一个整页滚动的网站。http://www.thepetedesign.com/demos/onepage_scroll_demo.html

这是我的jsfiddle示例：http://jsfiddle.net/aLjLjxux/

我希望它们保持固定并被以下div 重叠，而不是每个元素都被向上推出身体。此库中是否有此功能的简单实现，或者是否有其他库可以让我实现此目的？

作为参考，它看起来像这样：http://www.facebookgroups.com/，但反转除外。就像后面的div 一样，滚动时会与之前的div 重叠。

<body>
    <div class="main">
        <section style="background-color: #eaeaea;" class="first"><h1>Hello</h1></section>
        <section style="background-color: #dadada;" class="second"><h1>Sup</h1></section>
        <section style="background-color: #cacaca;" class="third">yo</section>
    </div> 
    <script type="text/javascript">
        $(".main").onepage_scroll({
           sectionContainer: "section",     // sectionContainer accepts any kind of selector in case you don't want to use section
           easing: "ease-out",                  // Easing options accepts the CSS3 easing animation such "ease", "linear", "ease-in",
                                            // "ease-out", "ease-in-out", or even cubic bezier value such as "cubic-bezier(0.175, 0.885, 0.420, 1.310)"
           animationTime: 1000,             // AnimationTime let you define how long each section takes to animate
           pagination: true,                // You can either show or hide the pagination. Toggle true for show, false for hide.
           updateURL: false,                // Toggle this true if you want the URL to be updated automatically when the user scroll to each page.
           beforeMove: function(index) {$(this).css("position", "fixed");},  // This option accepts a callback function. The function will be called before the page moves.
           afterMove: function(index) {},   // This option accepts a callback function. The function will be called after the page moves.
           loop: false,                     // You can have the page loop back to the top/bottom when the user navigates at up/down on the first/last page.
           keyboard: true,                  // You can activate the keyboard controls
           responsiveFallback: false,        // You can fallback to normal page scroll by defining the width of the browser in which
                                            // you want the responsive fallback to be triggered. For example, set this to 600 and whenever
                                            // the browser's width is less than 600, the fallback will kick in.
           direction: "vertical"            // You can now define the direction of the One Page Scroll animation. Options available are "vertical" and "horizontal". The default value is "vertical".  
        });
    </script>
</body>

谢谢。

您链接的网站正在使用pagePiling.js插件。它甚至支持没有CSS3支持的旧浏览器，不像你想要修改的一页滚动。

无需修改您正在使用的那个。反正不会是那个部落。

如果你想反转它，那么你最好从页面堆积开始.js你的工作量会少得多。

相关文章：