Jquery 滚动时修复导航菜单_Jquery_Css

Jquery 滚动时修复导航菜单

jquery css

Jquery 滚动时修复导航菜单,jquery,css,Jquery,Css,我希望向下滚动时导航菜单固定在顶部。我确信css和索引文件中没有错误。我认为错误在jquery file.js中，但我无法得到它。在索引文件中包含jquery可能有错误，请帮助索引 <!DOCTYPE html> <html> <head> <title>Fix menu</title> <link href="style.css" rel="stylesheet" type="text/css" /&g

我希望向下滚动时导航菜单固定在顶部。我确信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>

file.js

@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;
}

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

您需要包含scrollMonitor.js文件，而不需要jqueryui

从下载并使用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>