Question

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

我已禁用第二页上的向上滚动，以便用户无法向上滚动。但我注意到，滚动速度非常快，用户仍然可以访问目标网页。有什么办法解决这个问题？
我在网站上启用了导航点，使用它可以滚动到最顶层。如何在第一个点上禁用导航？

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

我还附加了一个指向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和＆amp;桌面上的Safari，在初始向下滚动后无法到达第一张幻灯片。

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

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

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

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

fullpage js - 禁用导航回登陆页面

1 个答案: