Question

我希望我的导航菜单在向下滚动时固定在顶部。我确定css和索引文件中没有错误。我认为错误是在jquery file.js中，但我无法得到它。可能会错误地将jquery包含在索引文件中，请帮忙。

索引

<!DOCTYPE html>
<html>
<head>
    <title>Fix menu</title>
        <link href="style.css" rel="stylesheet" type="text/css" />  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <script type="text/javascript" src="file.js"></script>

</head>
<body>

<h1>Scroll down</h1>
<h2>And watch the menu bar</h2>

<nav id="menu">
    <h1 id="sitename">MySite</h1>
    <ul>
    <li class="active"><a href="#">Home</a></li>

    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
</nav>
</body>
</html>

的style.css

@import url(http://fonts.googleapis.com/css?family=Roboto);

body {
    height: 2000px;
    font-family: Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1, h2 {
    text-align: center;
}

h1 {
    color: #222;
}

h2 {
    color: #555;
}

nav#menu {
    margin-top: 50px;
    background: #3498db;
    text-align: center;
    height: 50px;
    width: 100%;
}

nav#menu ul {
    padding: 0;
    background: white;
    margin: 0 auto;
    display: inline-block;
    height: 50px;
}

nav#menu ul li {
    float: left;
    padding: 0 20px;
    background: #3498db;
    list-style: none;
    margin-right: 5px;
    line-height: 50px;
    height: 50px;


    transition: margin 0.1s ease-in-out;
}

nav#menu ul li:nth-child(1) {
    margin-left: 5px;
}

nav#menu ul li.active {
    background: #2980b9;
}

nav#menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 1.3em;
}

nav#menu h1#sitename {
    font-size: 1.2em;
    line-height: 50px;
    margin: 0;
    position: absolute;
    left: 0.5em;
    color: white;
    opacity: 0;


    transition: opacity 0.1s ease-in-out;
}



nav#menu.scrolled {
    margin: 0;
    position: fixed;
    top: 0;
}

nav#menu.scrolled ul li {
    margin: 0;
}

nav#menu.scrolled h1#sitename {
    opacity: 1;
}

file.js

var menu = $('nav#menu');
var watcher = scrollMonitor.create( menu );
watcher.lock();
watcher.stateChange(function() {
    $(menu).toggleClass('scrolled', this.isAboveViewport);
});

Answer 1

您需要包含scrollMonitor.js文件，并且您不需要jquery UI。

从http://sakabako.github.io/scrollMonitor/scrollMonitor.js下载scrollMonitor.js并使用它。请不要直接链接到他们的JS网站。目前，我已将链接保留在代码中，以便您可以轻松查看工作示例。

代码：

<!DOCTYPE html>
<html>
<head>
    <title>Fix menu</title>
        <link href="style.css" rel="stylesheet" type="text/css" />  
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

</head>
<body>

<h1>Scroll down</h1>
<h2>And watch the menu bar</h2>

<nav id="menu">
    <h1 id="sitename">MySite</h1>
    <ul>
    <li class="active"><a href="#">Home</a></li>

    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
    </ul>
</nav>
<script type="text/javascript" src="http://sakabako.github.io/scrollMonitor/scrollMonitor.js"></script>
<script type="text/javascript" src="file.js"></script>
</body>
</html>

滚动时修复导航菜单

1 个答案: