jQuery Windows滚动事件在fullpage.js中不起作用 [英] jQuery windows scroll event not working in fullpage.js
本文介绍了jQuery Windows滚动事件在fullpage.js中不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我已经创建了一个页面，每个页面都是一整页.我正在使用jQuery库 fullpage.js 来做到这一点.
I've created a single page with each page is a full page. I'm using jQuery library fullpage.js to do that.
我的问题是:当滚动事件处于活动状态时，我想更改CSS.
My problem is: I want to change the CSS when the scroll event is active.
在Second Slide和Four Slide处，我要将'nav.nav-next'的位置从35％更改为65％，变为直线.
At Second Slide and Four Slide I want to change the position of 'nav.nav-next' from 35% to 65% to straight in the line.
当我滚动页面时，它什么也没做.
When I scroll the page it doesn't do anything.
我的JS代码是否适用于Four Slide?
Will be my JS code apply with Four Slide?
当前，我的JS代码如下:
Currently, my JS code like this:
var $navscroll = $('nav.nav-next');
$(document).scroll(function() {
alert($(this).scrollTop());
$navscroll.css({left: $(this).scrollTop()>10 ? "65%":"35%"});
});
我已经问过一个问题，应该设置主体的高度或div的高度. 但这对我不起作用，因为我使用的是fullpage.js
I've to ask the question before, should create the height of body or a div. But it not working with me because I using fullpage.js
因此，您可以在这里看到我的笔:
So, you can see my pen at here:
http://codepen.io/r0ysy0301/pen/RoyJOd
推荐答案
您可以尝试在下面进行操作，首先使用下面的代码使fulllpage.js scrollbar可见，然后使用css将其隐藏起来，这样有助于我们获得scrollbar positioning，然后使用jquery可以移动icons.您甚至需要将CSS图标的位置更改为fixed.
Hi you could try has below, first make your fulllpage.js scrollbar visible using below code and then again hide that using css, thus this helps us to get scrollbar positioning then using jquery you can move your icons. You even need to change your css icons poisition to fixed.
scrollBar: true,
autoScrolling:false
HTML:
<ul id="menu">
<li data-menuanchor="firstPage"><a href="#firstPage">First slide</a></li>
<li data-menuanchor="secondPage"><a href="#secondPage">Second slide</a></li>
<li data-menuanchor="3rdPage"><a href="#thirdPage">Third slide</a></li>
<li data-menuanchor="4thpage"><a href="#finalPage">Four slide</a></li>
</ul>
<nav class="nav-next">
<button type="button" id="btn-next" class="btn i-down" style="background: rgb(10, 49, 80);">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" width="16" height="10" viewBox="0 0 16 10" enable-background="new 0 0 16 10" xml:space="preserve" style="fill: rgb(255, 255, 255);"><polygon points="14 0 8 6 2 0 0 2 8 10 16 2 "></polygon></svg>
<span class="btn-bg"></span>
<span class="btn-bg btn-bg-mask" style="background: rgb(10, 49, 80);"></span>
</button>
</nav>
<div id="fullpage">
<div class="section active" id="section0">
<div class="contentfit">
<div class="left-content"></div>
<div class="right-content">
<p>
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!
</p>
</div>
</div>
</div>
<div class="section" id="section1">
<div class="contentfit">
<div class="right-content">
<p>
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!
</p>
</div>
<div class="left-content"></div>
</div>
</div>
<div class="section" id="section2">
<div class="contentfit">
<div class="left-content"></div>
<div class="right-content">
<p>
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!
</p>
</div>
</div>
</div>
<div class="section" id="section3">
<div class="contentfit">
<div class="right-content">
<p>
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!
</p>
</div>
<div class="left-content"></div>
</div>
</div>
</div>
CSS:
::-webkit-scrollbar{
display:none;
}
.contentfit {
height: 100%;
position: relative;
}
.left-content {
float: left;
height: 100%;
position: relative;
width: 35%;
background: url("http://www.studiometa.fr/assets/img/projets/94/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
});
这篇关于jQuery Windows滚动事件在fullpage.js中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
