jQuery fadeIn onscrollイベントが動作しない

Question

ページが100ピクセル下にスクロールされたときに、フェードインする（jQueryによる）固定位置のヘッダーdivがあります。

私が使用していますjqueryのはこれです：

$(document).ready(function(){ 
    $("body").scroll(function(){ 
    if ($("body").scrollTop() > 100) { 
      $(".header").fadeIn(); 
       } 
      else { 
       $(".header").fadeOut(); 
      } 
     }); 
    }); 

完全なコードはここにある：https://jsfiddle.net/Lxj0ynuk/

私はこれが動作しない理由はわかりません。私は特にjQueryに自信がないので、何が間違っているのか分からない。

助けてもらえますか？

Answer 1

使用window.scrollまたはdocument.scroll機能をしてdoumentを使用しますか、 fadeInヘッダーの 'body'の高さ

$(window).scroll(function(){ 
 
if ($(document).scrollTop() > 100) { 
 
    $(".header").fadeIn(); 
 
    } 
 
else { 
 
\t $(".header").fadeOut(); 
 
\t } 
 
});

div.header { 
 
    width: 100%; 
 
    position: fixed; 
 
    height: 50px; 
 
    background: blue; 
 
    top: 0px; 
 
    margin: 0; 
 
    display: none; 
 
} 
 

 
p { 
 
    width: 100px; 
 
}

<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> 
 

 
<div class='header'>Header 
 
    </div> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis cursus nisi sit amet suscipit. Etiam semper risus ac vulputate tincidunt. Duis sed neque sit amet lacus posuere egestas nec scelerisque nulla. Nam purus nunc, lobortis vel mauris 
 
    sed, convallis imperdiet enim. Praesent nec erat ullamcorper, gravida turpis eu, mattis velit. Nulla porta pulvinar dolor quis scelerisque. Nullam at est at justo porttitor volutpat. Proin facilisis erat suscipit blandit porttitor. Maecenas egestas 
 
    enim orci, ut egestas enim consequat a. Sed vehicula magna lorem, sed convallis erat porta non. Aenean quis consectetur nibh. Fusce nisl nulla, suscipit non vulputate eget, pellentesque et ligula. Curabitur sollicitudin urna ut sem euismod suscipit. 
 
    Suspendisse eget lacus ut nisl luctus molestie. Vivamus convallis magna a dui ullamcorper, sed sagittis arcu volutpat. Suspendisse hendrerit erat sit amet rhoncus convallis. Praesent quis suscipit velit. Suspendisse quis porta eros, non pulvinar eros. 
 
    Nam pellentesque pharetra dui, in interdum neque faucibus sit amet. Praesent quis orci nec neque posuere viverra. Integer volutpat sem id lectus congue, id vestibulum enim congue. Cras ultricies nunc justo, faucibus aliquam erat lobortis eu. Nullam 
 
    mollis volutpat faucibus. In hac habitasse platea dictumst. Vivamus eu lectus et quam tristique mollis in eu dolor. Aliquam volutpat scelerisque diam porta rutrum. Phasellus sed est tincidunt, pretium mauris non, bibendum nibh. Pellentesque accumsan 
 
    lacinia ultricies. Aenean et dolor ut quam dictum dapibus quis sit amet nisi. Praesent enim tellus, scelerisque et varius eu, porta vel ex. Vestibulum vel massa 
 
    </p>

Answer 2

まず、jQueryをフィディルドに追加していません。

あなたのページにjQueryのをロードしていると仮定すると、あなたがwindowにない身体スクロールを検出する必要があります。

$(window).scroll(function() { 
 
    if ($(window).scrollTop() > 100) { 
 
    $(".header").fadeIn(); 
 
    } else { 
 
    $(".header").fadeOut(); 
 
    } 
 
});

div.header { 
 
    width: 100%; 
 
    position: fixed; 
 
    height: 50px; 
 
    background: blue; 
 
    top: 0px; 
 
    margin: 0; 
 
    display: none; 
 
} 
 

 
p { 
 
    width: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class='header'> 
 
    </div> 
 
    <p> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis cursus nisi sit amet suscipit. Etiam semper risus ac vulputate tincidunt. Duis sed neque sit amet lacus posuere egestas nec scelerisque nulla. Nam purus nunc, lobortis vel mauris 
 
    sed, convallis imperdiet enim. Praesent nec erat ullamcorper, gravida turpis eu, mattis velit. Nulla porta pulvinar dolor quis scelerisque. Nullam at est at justo porttitor volutpat. Proin facilisis erat suscipit blandit porttitor. Maecenas egestas 
 
    enim orci, ut egestas enim consequat a. Sed vehicula magna lorem, sed convallis erat porta non. Aenean quis consectetur nibh. Fusce nisl nulla, suscipit non vulputate eget, pellentesque et ligula. Curabitur sollicitudin urna ut sem euismod suscipit. 
 
    Suspendisse eget lacus ut nisl luctus molestie. Vivamus convallis magna a dui ullamcorper, sed sagittis arcu volutpat. Suspendisse hendrerit erat sit amet rhoncus convallis. Praesent quis suscipit velit. Suspendisse quis porta eros, non pulvinar eros. 
 
    Nam pellentesque pharetra dui, in interdum neque faucibus sit amet. Praesent quis orci nec neque posuere viverra. Integer volutpat sem id lectus congue, id vestibulum enim congue. Cras ultricies nunc justo, faucibus aliquam erat lobortis eu. Nullam 
 
    mollis volutpat faucibus. In hac habitasse platea dictumst. Vivamus eu lectus et quam tristique mollis in eu dolor. Aliquam volutpat scelerisque diam porta rutrum. Phasellus sed est tincidunt, pretium mauris non, bibendum nibh. Pellentesque accumsan 
 
    lacinia ultricies. Aenean et dolor ut quam dictum dapibus quis sit amet nisi. Praesent enim tellus, scelerisque et varius eu, porta vel ex. Vestibulum vel massa 
 
    </p>