修复了 div fullpage.js 的内部部分

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>

整页 JS

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

我试过使用像 http://stickyjs.com/ 和类似的插件，但问题是它们都是根据滚动原理工作的。

Answer 1

使用position:absolute而不是固定的。然后对section元素使用position:relative，这样绝对位置就会和section相关了。

修复了 div fullpage.js 的内部部分

fixed div inside section of fullpage.js

html

javascript

css

jquery

fullpage.js