Question

我正在建立一个需要部分滚动的网站。我通过在wordpress仪表板中添加以下代码来创建部分滚动功能。

jQuery(document).ready(function($) {
    $('#fullpage').fullpage({
        //options here
        scrollingSpeed: 700,
        navigation: true,
        slidesNavigation: true,
    verticalCentered:true,
    //Design
    controlArrows: true,
    verticalCentered: true,
    sectionsColor : ['#ccc', '#fff'],
    paddingTop: '0px',
    paddingBottom: '0px',
    fixedElements: '#header, .footer',
    responsiveWidth: 0,
    responsiveHeight: 0,
    responsiveSlides: false,
    parallax: false,
    parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
    cards: false,
    cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},

    //Custom selectors
    sectionSelector: '.section',
    slideSelector: '.slide',

    lazyLoading: true,
     
    
        
    });
    //methods
    $.fn.fullpage.setAllowScrolling(true);
});

以及

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.4/fullpage.extensions.min.js"></script>

然后，我通过在elementor或pro中制作模板来创建网站，然后将html添加到实际页面中，以请求通过模板ID查看模板。

滚动效果本身效果很好，但是显示的部分（模板）在屏幕下方掉了100px，换句话说，它们太长了，无法适应高度。我已经尝试了elementor内的大多数部分设置来解决此问题，并将此代码添加到每个单独的模板中

selector{ 
    height: calc(100vh - 90px);
}

我添加了最后一部分代码，因为模板中的“适合hieght”选项没有考虑导航栏，因此我怀疑这是问题所在，因为偏移量大约是导航栏的高度，但它不起作用。 >

关于我可能做错了什么的任何建议，或者一些可以解决此问题的代码建议？

元素或部分中的部分滚动-部分无法正确显示

0 个答案: