Onscroll not working

Question

상단 탐색에 onscroll 이벤트 here이 작동하지 않습니다. 이유가 확실하지 않습니다.

작은 검색 아이콘은 스크롤 할 때까지 보이지 않아야합니다.

여기에 fiddle example이 있습니다.

<script type="text/javascript"> 
$("body").scroll(function() { 
    var value = $(this).scrollTop(); 
    if (value > 120) 
     $("#topSearchIcon").css("display", "block"); 
    else 
     $("#topSearchIcon").css("display", "none"); 
}); 
</script> 

되는 HTML 부분 : 알

<li id="topSearchIcon"><a href="#"><img width=20" height=20" src ="/images/searchicon.png" /></a></li> 

어떤 아이디어

이

헤더의 끝에 배치 JS이다.

Answer 1

대신 $(document).scroll을 사용할 수 있습니다. http://jsfiddle.net/7sW84/1/

<script type="text/javascript"> 
    $(document).scroll(function() { 
     if ($(this).scrollTop() > 120) { 
      $("#topSearchIcon").css("display", "block"); 
     } 
     else { 
      $("#topSearchIcon").css("display", "none"); 
     } 
    }); 
</script> 

여전히 작동하지 않는 경우, $(document).ready(function() {};으로 포장하려고 :

내 바이올린에서보세요.

기본적으로 #topSearchIcon을 숨기는 것을 잊지 마세요.

Answer 2

ready()로 스크립트를 래핑 할 수 있습니다. 당신이해야

$(document).scroll(function() { 
    var value = $(this).scrollTop(); 
    if (value > 120) 
    $("#topSearchIcon").css("display", "block"); 
    else 
    $("#topSearchIcon").css("display", "none"); 
}); 

다른 변화는 디스플레이를 설정하는 것입니다 : 콘솔에이를 입력하고 Enter 키를 누르십시오 경우 페이지에 나를 위해 작동 .scroll

$(document).ready(function(){ 
    $("body").scroll(function() { 
    var value = $(this).scrollTop(); 
    if (value > 120) 
     $("#topSearchIcon").css("display", "block"); 
    else 
     $("#topSearchIcon").css("display", "none"); 
    }); 

}); 

Answer 3

$ (문서) 없음; 에 대한 귀하의 CSS : "#topSearchIcon"그래서 기본적으로 숨겨져 있습니다.