0

I want my nav menu to be fixed at the top when scrolling down. I'm sure there is no error in the css and index files. I think the error is in jquery file.js but I can't get it. probably mistake in including jquery in index file, help please.

Index

<!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);
});

1 Answer 1

0

You need to include the scrollMonitor.js file and you don't need the jquery UI for this.

Download scrollMonitor.js from http://sakabako.github.io/scrollMonitor/scrollMonitor.js and use it. Please don't directly link to their site for the JS. Currently I have kept the link in the code so that you can readily see the working example.

Code:

<!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
  • great... can you please accept the answer by clicking the tick?
    – gurudeb
    Aug 25, 2014 at 15:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.