如何防止上面部分的底部泄漏到下一部分的顶部(fullPage.js)

时间:2016-09-28 21:06:41

标签: javascript fullpage.js

我已经多次遇到过这个问题,滚动是从部分中删除的,它创建了一个效果,其中一个部分的顶部实际上是一个之前的底部。我在其中有position: absolute的部分中有一张图片,这是问题吗?

Link

编辑:代码

Codepen

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="http://alvarotrigo.com/fullPage/jquery.fullPage.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="http://alvarotrigo.com/fullPage/jquery.fullPage.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#fullpage').fullpage({
                verticalCentered: false,
                css3: false
            });
        });
    </script>
    <style>
        #intro {
            backgroundSize: 100% 10% !important;
            color: white;
        }
        img {
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="fullpage">
        <div class="section" id="intro">
            <img src="https://aos.iacpublishinglabs.com/question/aq/1400px-788px/many-lumens-100-watt-incandescent-light-bulb-give-off_2c6301bc5ccd144.jpg?domain=cx.aos.ask.com"></img>
            <h1>Tungsten: It'l light up your day!</h1>
        </div>
        <div class="section" id="gallery">
            <div class="slide">
            </div>
            <div class="slide">asdfasdf
            </div>
            <div class="slide">asdfasdfasdf
            </div>
        </div>
    </div>
</body>
</html>

0 个答案:

没有答案