jQuery Windows滚动事件在fullpage.js中不起作用

Question

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

Answer 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
});