Question

我试图制作一个jQuery脚本，在向下滚动页面800px后会出现一个导航栏。

这是文件：

$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 800) {
    $('#fixedBar').fadeIn();
  } else {
    $('#fixedBar').fadeOut();
  }
});

这是CSS：

#fixedBar {
    display: none;
    position: fixed;
    background-color: rgba(255,255,255,.9);
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
}

我不太清楚为什么这个jQuery没有做任何事情。感谢所有帮助。

以下是正在使用的HTML：

<div id="fixedBar">
        <h1>Company</h1>
        <a href="#" class="entypo-menu showMenu"></a>
    </div>

Heres the head

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <!-- Links to JS/CSS/Fonts -->
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="../css/style.css" media="screen"/>
    <link rel="stylesheet" href="../css/jquery.maximage.css" type="text/css" media="screen" title="CSS" charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="../css/navView.css" />
    <link rel="icon" type="image/ico" href="../img/favicon.ico"/>
    <title>George | New Website</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="../js/navBar.js" type="text/javascript"></script>
    <script src="../js/jquery.cycle.all.js" type="text/javascript"></script>
    <script src="../js/jquery.maximage.min.js" type="text/javascript"></script>
    <script src="../js/modernizr.custom.25376.js"></script>
</head>

刚检查了js文件夹，它包含了带有jQuery代码的navBar.js文件。

Answer 1

它对我来说很好：http://jsfiddle.net/8kzdx9wz/

<div id="fixedBar">nav bar</div>

您的HTML是否正确写入并且您是否有足够的内容在页面上向下滚动到800px？

无法使jQuery scrollTop工作

1 个答案: