0

I am trying to learn jQuery. And I am wonder how I could accomplish this.

Lets say I have a navigation like this:

HTML:

<nav id="navigation">
    <h1>My Navigation</h1>
</nav>

CSS:

nav {
    width:100%;
    height:50px;
    background:black;
}

nav h1 {
    color:white;
}

English is not my native language but I will try to explain this as best as I can.

How can I make this navigation follow/float down when the user scrolls down. So that the navigation always stays on top of the visiable area of the website using jQuery (or vanilla JavaScript, but jQuery is preffered)?

jsfiddle: http://jsfiddle.net/ax6uts7z/

Example of what I mean: http://www.dwuser.com/education/content/creating-a-floating-navigation-menu/demo/complete.html

Alex
  • 1,988
  • 3
  • 14
  • 20
  • maybe you need `position: fixed` as I understood. May be you have some examples? – AleshaOleg Aug 31 '15 at 17:45
  • No what I mean I that it should float, so its always on top of the visable area. I will try to fina a example. – Alex Aug 31 '15 at 17:50
  • I mean like this http://www.dwuser.com/education/content/creating-a-floating-navigation-menu/demo/complete.html – Alex Aug 31 '15 at 17:52

2 Answers2

1

You can do just add position: fixed to your nav CSS.

nav {
    width:100%;
    height:50px;
    background:black;
    position: fixed;
}

Here is a fiddle. I added a bunch of breaks to make the page scrollable. As you can see, the navigation bar is fixed and follows when scrolled down.

EDIT: Since the OP updated the requirements for the question see below:

$(window).bind('scroll', function () {
    if ($(window).scrollTop() > 50) {
        $('.menu').addClass('fixed');
    } else {
        $('.menu').removeClass('fixed');
    }
});

You can do this by adding the fixed class once it has scrolled down a certain amount. You can adjust this amount by replacing the 50 in my example above with the number of pixels that you desire. The higher the number, the further down you have to scroll before the fixed position attribute is applied.

Alex Pan
  • 4,341
  • 8
  • 34
  • 45
0

Ok. Here we go. You need a sticky menu. when user scroll down menu goes fixed on the top.

<!doctype html>
<html>    
<head>
<title>Menu fixed on top</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" src="jquery.sticky.js"></script>
    <!--include this in header---->
    <script>
        $(window).load(function() {
            $("#navigation").sticky({
                topSpacing: 0
            });
        });
    </script>
    <style>
        nav {
            width:100%;
            height:50px;
            background:black;
            padding:5px;
        }
        nav h1 {
            color:white;
        }
    </style>
</head>

<body>
    <nav id="navigation">
         <h1>My Navigation</h1>
</nav>
    <br>
    <br>
    <br>
    <br>
    <br>Lorem ipsum dolor sit amet, vis in feugiat delicata gubergren, doctus ullamcorper no mel. Causae adipiscing id vix. Te diceret denique sea. Cum offendit incorrupte in, ei natum perpetua usu, usu aperiri euripidis id. Sit agam delenit sadipscing ea, sit conceptam scripserit ex. Sonet facilisi vis ne, omnium veritus vix at.
    <br>
    <br>
    <br>
    <br>
    <br>Lorem ipsum dolor sit amet, vis in feugiat delicata gubergren, doctus ullamcorper no mel. Causae adipiscing id vix. Te diceret denique sea. Cum offendit incorrupte in, ei natum perpetua usu, usu aperiri euripidis id. Sit agam delenit sadipscing ea, sit conceptam scripserit ex. Sonet facilisi vis ne, omnium veritus vix at.
    <br>
    <br>
    <br>
    <br>
    <br>Lorem ipsum dolor sit amet, vis in feugiat delicata gubergren, doctus ullamcorper no mel. Causae adipiscing id vix. Te diceret denique sea. Cum offendit incorrupte in, ei natum perpetua usu, usu aperiri euripidis id. Sit agam delenit sadipscing ea, sit conceptam scripserit ex. Sonet facilisi vis ne, omnium veritus vix at.
    <br>
    <br>
    <br>
    <br>
    <br>Lorem ipsum dolor sit amet, vis in feugiat delicata gubergren, doctus ullamcorper no mel. Causae adipiscing id vix. Te diceret denique sea. Cum offendit incorrupte in, ei natum perpetua usu, usu aperiri euripidis id. Sit agam delenit sadipscing ea, sit conceptam scripserit ex. Sonet facilisi vis ne, omnium veritus vix at.
    <br>
    <br>
    <br>
    <br>
    <br>Lorem ipsum dolor sit amet, vis in feugiat delicata gubergren, doctus ullamcorper no mel. Causae adipiscing id vix. Te diceret denique sea. Cum offendit incorrupte in, ei natum perpetua usu, usu aperiri euripidis id. Sit agam delenit sadipscing ea, sit conceptam scripserit ex. Sonet facilisi vis ne, omnium veritus vix at.
    <br>
    <br>
    <br>
    <br>
    <br>Lorem ipsum dolor sit amet, vis in feugiat delicata gubergren, doctus ullamcorper no mel. Causae adipiscing id vix. Te diceret denique sea. Cum offendit incorrupte in, ei natum perpetua usu, usu aperiri euripidis id. Sit agam delenit sadipscing ea, sit conceptam scripserit ex. Sonet facilisi vis ne, omnium veritus vix at.
    <br>
    <br>
    <br>
    <br>
    <br>Lorem ipsum dolor sit amet, vis in feugiat delicata gubergren, doctus ullamcorper no mel. Causae adipiscing id vix. Te diceret denique sea. Cum offendit incorrupte in, ei natum perpetua usu, usu aperiri euripidis id. Sit agam delenit sadipscing ea, sit conceptam scripserit ex. Sonet facilisi vis ne, omnium veritus vix at.
</body>
</html>

Hope this works for you.

CodeRomeos
  • 2,428
  • 1
  • 10
  • 20