jQuery窗口滾動事件不起作用

Question

我創建了單個頁面。

我想在滾動事件處於活動狀態時更改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>

但是，當我試圖把它的滾動沒有發生任何事情。

Answer 1

你的代碼工作正常，但你需要添加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>

Answer 2

我建議即使在窗口上觸發滾動而不是文檔。

因此，像這樣： $(window).scroll(..)

而且一般包裝你的代碼：

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

，以確保當您選擇他們所有的元素都可用。

Answer 3

這是因爲該頁面沒有足夠的高度來滾動。增加頁面高度或容器高度以允許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>