Javascript jQuery windows滚动事件在fullpage.js中不起作用_Javascript_Jquery_Html_Css_Fullpage.js

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

javascript jquery html css

Javascript jQuery windows滚动事件在fullpage.js中不起作用,javascript,jquery,html,css,fullpage.js,Javascript,Jquery,Html,Css,Fullpage.js,我创建了一个单独的页面，每个页面都是一个完整的页面。我正在使用jQuery库来实现这一点我的问题是：我想在scroll事件处于活动状态时更改CSS 在第二张幻灯片和第四张幻灯片中，我想将'nav.nav next'的位置从35%更改为65%，再更改为直线当我滚动页面时，它什么也不做我的JS代码是否适用于四张幻灯片目前，我的JS代码如下： var $navscroll = $('nav.nav-next'); $(document).scroll(function() { aler

我创建了一个单独的页面，每个页面都是一个完整的页面。我正在使用jQuery库来实现这一点

我的问题是：我想在scroll事件处于活动状态时更改CSS

在

第二张幻灯片

和

第四张幻灯片

中，我想将

'nav.nav next'

的位置从35%更改为65%，再更改为直线

当我滚动页面时，它什么也不做

我的JS代码是否适用于四张幻灯片

目前，我的JS代码如下：

var $navscroll = $('nav.nav-next');
$(document).scroll(function() {
    alert($(this).scrollTop()); 
  $navscroll.css({left: $(this).scrollTop()>10 ? "65%":"35%"});
});

我之前要问一个问题，应该创建身体的高度还是一个div。但是它不适合我，因为我使用fullpage.js

所以，你可以在这里看到我的笔：

您好，您可以尝试使用下面的代码，首先使用下面的代码使您的

fullpage.js滚动条可见，然后使用css
再次隐藏滚动条，这样可以帮助我们获得滚动条定位
，然后使用jquery
您可以移动图标
。您甚至需要将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>

::-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;
}

$(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:
<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>

::-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;
}

$(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
});

我试着用你的密码。有任何一个滚动的方法（不是像你的方法一样的普通滚动-你的方法是完全正确的）。当用户操作滚动鼠标时，我的站点必须只显示一个页面。@vanloc我们需要一些事件来执行操作，所以请替换以前的Jquery和CSS代码，这些代码是我提供的。我认为这需要增加延迟，以便在向下滚动时显示nav next
。如在firstPage
处向下滚动：当出现secondPage
部分时，它应该隐藏并显示。滚动时删除导航下一步。你有办法解决这个问题吗？谢谢@vanloc，是的，您可以用animate（）替换css（），甚至可以添加不透明度属性和left。@vanloc太好了：-）