jQuery窗口滚动事件不起作用

问题描述：

我想在滚动事件处于活动状态时更改CSS。

所以，我的代码尝试过这样的：

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

.nav-next { 
 
    z-index: 99; 
 
    position: absolute; 
 
    left: 35%; 
 
    top: 60%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<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 btn-bg-mask" style="background: rgb(10, 49, 80);"></span> 
 
    </button> 
 
</nav>

但是，当我试图把它的滚动没有发生任何事情。

不是'$（窗口）.scroll（）'？我认为射击元素是'window' – naoxink

答

你的代码工作正常，但你需要添加height您html body标签滚动并看到移动该image，如下面的输出。

body{ 
    height:1200px; 
}

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

.nav-next { 
 
    z-index: 99; 
 
    position: absolute; 
 
    left: 35%; 
 
    top: 60%; 
 
} 
 
body{ 
 
    height:1200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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 btn-bg-mask" style="background: rgb(10, 49, 80);"></span> 
 
    </button> 
 
</nav>

我正在使用fullpage.js。我无法设定身体的高度。它会自动生成如下：'style =“overflow：hidden; height：100％;”' – vanloc

为什么要在页面没有滚动的情况下触发滚动内容？可能有更简单的方法来实现你的目标？ –

您可以在笔中看到完整的代码：http://codepen.io/r0ysy0301/pen/RoyJOd。我试图在用户滚动时更改按钮的位置。 – vanloc

答

我建议即使在窗口上触发滚动而不是文档。

因此，像这样： $(window).scroll(..)

而且一般包装你的代码：

$(document).ready(function() { // Your Code });

，以确保当您选择他们所有的元素都可用。

答

这是因为该页面没有足够的高度来滚动。增加页面高度或容器高度以允许scroll。检查代码段。

当用户滚动到元素中的不同位置时，将滚动事件发送到元素。它适用于窗口对象，但也可用于滚动框架和滚动框架元素（设置为的溢出CSS属性设置为）（或者当元素的显式高度或宽度小于其内容的高度或宽度时，自动显示为）。

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

.nav-next { 
 
    z-index: 99; 
 
    position: absolute; 
 
    left: 35%; 
 
    top: 60%; 
 
} 
 

 
div { 
 
background: #000; 
 
height: 500px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<nav class="nav-next"> 
 
\t <button type="button" id="btn-next" class="btn i-down" style="background: rgb(10, 49, 80);"> 
 
\t \t <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> 
 
\t \t <span class="btn-bg btn-bg-mask" style="background: rgb(10, 49, 80);"></span> 
 
\t </button> 
 
    
 
</nav> 
 
<div> test scroll</div>

我使用的是fullpage.js。我无法设置身体的高度或创建一个div。 – vanloc

jQuery窗口滚动事件不起作用

相关推荐