jQuery窗口滚动事件在fullpage.js中不起作用
我创建了一个页面，每个页面都是一个完整的页面。 我正在使用jQuery库fullpage.js来做到这一点。
我的问题是：我想在滚动事件处于活动状态时更改CSS。
在Second Slide和Four Slide我想将'nav.nav-next'的位置从35％更改为65％直线。
当我滚动页面时，它什么也没做。
将我的JS代码应用于Four Slide吗？
目前，我的JS代码是这样的：
var $navscroll = $('nav.nav-next'); $(document).scroll(function() { alert($(this).scrollTop()); $navscroll.css({left: $(this).scrollTop()>10 ? "65%":"35%"}); });
我之前要问这个问题，应该创造身体或div的高度。 但它不能与我合作，因为我使用的是fullpage.js
所以，你可以在这里看到我的笔：
http://codepen.io/r0ysy0301/pen/RoyJOd
嗨，你可以尝试下面，首先使用下面的代码使你的fulllpage.js scrollbar可见，然后再次使用css隐藏，这样可以帮助我们获得scrollbar positioning然后使用jquery你可以移动你的icons 。 你甚至需要将你的CSS图标poisition更改为fixed 。
scrollBar: true, autoScrolling:false
HTML：
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, earum animi impedit, qui nobis repudiandae natus omnis deleniti excepturi itaque similique saepe. Sequi animi dolorum eum tenetur fugiat sed molestias!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, earum animi impedit, qui nobis repudiandae natus omnis deleniti excepturi itaque similique saepe. Sequi animi dolorum eum tenetur fugiat sed molestias!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, earum animi impedit, qui nobis repudiandae natus omnis deleniti excepturi itaque similique saepe. Sequi animi dolorum eum tenetur fugiat sed molestias!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam, earum animi impedit, qui nobis repudiandae natus omnis deleniti excepturi itaque similique saepe. Sequi animi dolorum eum tenetur fugiat sed molestias!
CSS：
::-webkit-scrollbar{ display:none; } .contentfit { height: 100%; position: relative; } .left-content { float: left; height: 100%; position: relative; width: 35%; background: url("http://sofzh.miximages.com/javascript/idcampus__larger.jpg") no-repeat; background-size: cover; background-position: center; } .right-content { float: left; width: 65%; } /* Button Next * ------------------- */ .nav-next { z-index: 99; position: fixed; left: 35%; top: 60%; /*display: none;*/ } .i-down.btn { padding: 0; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.19, 1, 0.22, 1); transition: transform 0.3s cubic-bezier(0.19, 1, 0.22, 1); } .btn:hover { color: white; -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); } .is-loaded .btn { -webkit-transition: all 1s cubic-bezier(1, 0, 0, 1); transition: all 1s cubic-bezier(1,0,0,1); } .i-down { width: 3.4em; height: 3.4em; margin-left: -1.7em; background: #292929; color: white; border: 0; border-radius: 50%; cursor: pointer; } .btn { display: inline-block; padding: 0.5em 1.33em; font-weight: 700; border: 2px solid; cursor: pointer; overflow: hidden; -webkit-transform: translateZ(0); transform: translateZ(0); will-change: border, color; } .i-down svg { z-index: 3; display: inline-block; vertical-align: middle; fill: #fff; width: 1em; height: .625em; -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.19, 1, 0.22, 1); transition: transform 0.3s cubic-bezier(0.19,1,0.22,1); } .nav-next .btn-bg:first-of-type { z-index: 1; } .nav-next .btn-bg { height: 100%; margin: 0; } .i-down .btn-bg { height: 100%; padding-top: 0; } .btn-bg:first-of-type { z-index: -2; background: currentColor; -webkit-transition: opacity 0.3s 0s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.4s 0.05s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 0.3s 0s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s 0.05s cubic-bezier(0.19,1,0.22,1); } .btn-bg { position: absolute; top: 50%; left: 0; width: 100%; height: 0; padding-top: 100%; padding-top: calc(100% + 2.66em); border-radius: 100px; opacity: 0; -webkit-transform: translateY(-50%) scale(0); -ms-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0); will-change: transform, opacity; } .nav-next .btn-bg:last-of-type { z-index: 2; } .nav-next .btn-bg { height: 100%; margin: 0; } .i-down .btn-bg { height: 100%; padding-top: 0; } .btn-bg:last-of-type { z-index: -1; background: #292929; -webkit-transition: opacity 0.4s 0.1s cubic-bezier(0.19, 1, 0.22, 1), -webkit-transform 0.4s 0s cubic-bezier(0.19, 1, 0.22, 1); transition: opacity 0.4s 0.1s cubic-bezier(0.19, 1, 0.22, 1), transform 0.4s 0s cubic-bezier(0.19,1,0.22,1); } .btn-bg { position: absolute; top: 50%; left: 0; width: 100%; height: 0; padding-top: 100%; padding-top: calc(100% + 2.66em); border-radius: 100px; opacity: 0; -webkit-transform: translateY(-50%) scale(0); -ms-transform: translateY(-50%) scale(0); transform: translateY(-50%) scale(0); will-change: transform, opacity; }
jQuery的：
$(window).on('scroll',function(){ var a = $("#section0").hasClass('active'); var b = $("#section1").hasClass('active'); var c = $("#section2").hasClass('active'); var d = $("#section3").hasClass('active');; var navscroll = $('.nav-next'); if(a){ $(navscroll).css('left','35%'); } if(b){ $(navscroll).css('left','65%'); } if(c){ $(navscroll).css('left','35%'); } if(d){ $(navscroll).css('left','65%'); } }); $('#fullpage').fullpage({ sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', 'whitesmoke', '#ccddff'], anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', 'lastPage'], menu: '#menu', slidesNavigation: true, scrollBar: true, autoScrolling:false });