jQueryウィンドウのスクロールイベントがfullpage.jsで機能しない

Question

各ページが1ページで作成されました。私はそれを行うには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要素の高さを作成する必要があり、前に質問をしてきました。まず、以下の使用してfulllpage.js scrollbar見えるように、以下の

http://codepen.io/r0ysy0301/pen/RoyJOd

Answer 1

こんにちはあなたは試みることができるしている：私は

のでfullpage.js

を使用しているため しかし、それはあなたがここで私のペンを見ることができ、私と一緒に働いていません再び cssを使用してそれを隠すので、 scrollbar positioningを取得してから jqueryを使用すると、 iconsを移動することができます。あなたはさらに、CSSのアイコンの見出しを 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 
});