javascript - jQuery 窗口滚动事件不起作用

Question

我创建了单个页面。

我想在滚动事件激活时更改 CSS。

所以，我尝试了这样的代码:

var $navscroll = $('nav.nav-next');
$(document).scroll(function() {
  alert($(this).scrollTop());	
  $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>

但是当我尝试滚动时，它什么也没有发生。

Answer 1

您的代码工作正常，但您需要将 height 添加到您的 html body 标记以滚动并查看移动该 image 的输出，如下所示。

body{
  height:1200px;
}

var $navscroll = $('nav.nav-next');
$(document).on('scroll',function() {
  alert($(this).scrollTop());	
  $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>