Question

我的页面的三个部分位于fullpagejs中。中间页面需要包含一个非常高的div，它分为两列。左边是需要遵循右边文本的div，它占用div的整个高度。但是因为fullpage.js的工作方式（用css翻译而不是实际的滚动，我不能使定位固定的div表现得像

HTML

<div class="section section-1 show-for-large">
    section1 content
</div>
<div class="section section-2">
    <div class="row">
    <div class="small-12 medium-6 column"> 
        <div class="row" id="pokemon">
            <div class="small-5 medium-5 columns">
                <img src="/"> 
            </div>
            <div class="small-7 medium-7 column">
                <span class="title">
                    title
                </span>
            </div>
        </div>
        <div class="row hide-for-large">
            <div class="small-12 columns">
                <p>
                  text
                </p>
            </div>
        </div>
    </div>
    <div class="small-12 medium-5 column">
        <div>
            <p>text</p>
        </div>
    </div>
</div>
</div>
<div class="section section-3">
    section3 content
</div>
<div class="section section-4 fp-auto-height">
    section4 content
</div>

FULLPAGE JS

$('#fullpage').fullpage({
    sectionSelector: '.section',
    scrollOverflow: true,
    verticalCentered: false,
    normalScrollElements:'#pokemon',
    css3: true,
    });

我尝试使用类似http://stickyjs.com/的插件，类似于它，但问题是它们都是按照滚动原则工作的。

Answer 1

使用position:absolute代替固定。然后使用position:relative作为截面元素，因此绝对位置将与截面相关。

修复了fullpage.js

1 个答案: