问题
I've created a single page with each page is a full page. I'm using jQuery library fullpage.js to do that.
My problem is: I want to change the CSS when the scroll event is active.
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.
Will be my JS code apply with Four Slide?
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%"});
});
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
回答1:
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
});
来源：https://stackoverflow.com/questions/41030625/jquery-windows-scroll-event-not-working-in-fullpage-js