CODEWITHSUNDEEP
jqueryhtmlcss
Matthew James Morris
Matthew James Morris

Reputation: 93

Dynamic header bar/navigation bar

Hey im trying to create a dynamic header/ navigation bar such as the header bar seen here: http://www.feed-the-beast.com/

i currently have this to go with:

Jquery:

$(document).ready(function() {
var lock = $('#header').position().top;
$(window).scroll(function() {
    if(lock >= $(window).scrollTop()) {
        if($('#header').hasClass('fixed')) {
            $('#header').removeClass('fixed');
        }
    } else { 
        if(!$('#header').hasClass('fixed')) {
            $('#header').addClass('fixed');
        }
    }
}); 
});

Html:

<div id="header" class=""></div>

Css:

#header {
width: 100%;
height: 80px;
background-color: #000;
left:0;
right: 0;
margin-top: 340px;
position: absolute;}

body {
height: 7000px;
width: 100%;
float: right;}
.fixed {
position: fixed;}

Any help will be appreciated.

Upvotes: 1

Views: 344

Answers (1)

user3546727
user3546727

Reputation:

So you want a sticky meniu with an anchor on scroll ?

Here is the script for it :

$(function() {
    var move = function() {
       var st = $(window).scrollTop();
        var ot = $("#scroller-anchor").offset().top;
        var s = $("#scroller");
       if(st > ot) {
            s.css({
                position: "fixed",

            });
        } else {
            if(st <= ot) {
                s.css({
                    position: "relative",

                });
            }
        }
    };
    $(window).scroll(move);
    move();
});

And you need to add this to your HTML : 

<div id="scroller-anchor></div>
   <div id="scroller">
     YOUR MENU HTML HERE
   </div>

UPDATE

A working jsFiddle here :D

PS: Also, if you do not want your background color to change when it sticks to top, you only have to change "background-color": "red" with your desired background color.

Upvotes: 1

Related Questions