fullpage js - 禁用导航回到着陆页

Question

我在我的网站上使用 fullPage JS，我还启用了页面右侧的导航。我有一个登陆页面，一旦向下滚动，我不想让用户能够滚动回到登陆页面。对于这个需求，我面临两个问题：

我在第二页禁用了向上滚动，这样用户就不能向上滚动了。但我注意到，如果滚动速度非常快，用户仍然可以到达登陆页面。解决这个问题的方法是什么？
我在网站上启用了导航点，使用它我可以滚动到最顶部。如何禁用第一个点的导航？

Link 到网站： https://rimildeyjsr.github.io/st.anthony

我还将 link 附加到 github 存储库：https://github.com/rimildeyjsr/st.anthony

插件中使用的选项：

$('#fullpage').fullpage({
                    //names for the anchors of the pages
                    anchors:['welcome','home','administration_page','faculty_section','staff_section'],
                    navigation: true,
                    navigationPosition: 'right',
                    fixedElements: '#toggle,#overlay',

                    afterLoad : function(anchorLink,index) {
                        //after loading a section, perform these functions

                        if (index == 1 || anchorLink == 'welcome'){
                            //show the other sections now that the page has loaded
                            $('#fp-nav').hide();
                            $('#section1').show();
                            $('#section2').show();
                            $('#section3').show();
                            $('#section4').show();
                            $('#toggle').hide();

                        }
                        if (index == 2 || anchorLink == 'home'){
                            $('#fp-nav').show();
                            $('#toggle').show();
                            if (window.innerWidth < 480) {
                                $('.school-logo2').fadeIn();
                            }
                            $('.school-name').addClass('come-in');
                                slideEffect();

                            $.fn.fullpage.setAllowScrolling(false,'up');
                            $.fn.fullpage.setKeyboardScrolling(false, 'up');
                        }

                        if(index == 3 || anchorLink == 'administration_page'){
                            $('#fp-nav').show();
                            $('#toggle').show();
                            $('.offscreen-logo').addClass('come-in-logo').one(animationEnd,function(){
                               display();
                            });
                            $.fn.fullpage.setAllowScrolling(true,'up');
                            $.fn.fullpage.setKeyboardScrolling(true, 'up');
                        }

                        if(index == 4 || anchorLink == 'faculty_section') {
                            $('#fp-nav').show();
                            $('#toggle').show();
                            $('#section3 .section-heading').addClass('animated fadeInDown');
                            $('#section3 .card').addClass('animated fadeInUp');
                            $.fn.fullpage.setAllowScrolling(true,'up');
                            $.fn.fullpage.setKeyboardScrolling(true, 'up');
                        }
                        if(index == 5 || anchorLink == 'staff_section') {
                            $('#fp-nav').show();
                            $('#toggle').show();
                            $('#section4 .section-heading').addClass('animated fadeInDown');
                            $('#section4 .card').addClass('animated fadeInUp');
                            $.fn.fullpage.setAllowScrolling(true,'up');
                            $.fn.fullpage.setKeyboardScrolling(true, 'up');
                        }
                    }

                });

Answer 1

我无法复制第 1 期，您说您可以快速滚动并仍然到达第一张幻灯片。我已尝试在桌面上的 Chrome 和 Safari 中尽可能快地滚动，但在初始向下滚动后无法到达第一张幻灯片。

如果您想隐藏第一个分页点，可以使用 :first-of-type 定位 li。在您的情况下，您可以添加以下代码：

#fp-nav ul li:first-of-type { display: none; }

如果您想保留它，但只是禁用该功能，您可以使用 pointer-events，在这种情况下，您可以使用：

#fp-nav ul li:first-of-type { pointer-events: none; }

fullpage js - 禁用导航回到着陆页

fullpage js - disable navigation back to the landing page

html

css

fullpage.js