Onscroll不工作

Question

顶部导航栏上有一个onscroll事件here，但是我无法确定原因。

小型搜索图标在滚动之前不应该可见。

这是fiddle example。

这是放在标题末尾的js：

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

任何想法都赞赏。

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).ready(function(){
  $("body").scroll( function() {
    var value = $(this).scrollTop();
    if ( value > 120 )
        $("#topSearchIcon").css("display", "block");
    else
        $("#topSearchIcon").css("display", "none");
    });

});

Answer 3

$（document）.scroll在你的页面上为我工作，如果你在控制台中键入它并点击回车：

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

你应该做的另一个改变是设置display：none;在你的css中：“＃topSearchIcon”因此默认隐藏。