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

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

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

＆＃13;

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

＆＃13;

.nav-next {
  z-index: 99;
  position: absolute;
  left: 35%;
  top: 60%;
}

div {
background: #000;
height: 500px;
}

＆＃13;

<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>
<div> test scroll</div>

＆＃13;

Answer 2

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

body{
  height:1200px;
}

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

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

这样的事情： $(window).scroll(..)

通常也会将您的代码包装在：

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

确保所有元素在您选择时都可用。

jQuery窗口滚动事件无法正常工作

3 个答案: