I have a navigation bar after header and i want that to be stuck at top of the page while scrolling down.

can i do with position:relative?? Unlike position:fixed with the help of the following script or any other better way?

$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
    $('#header').css('top', $(window).scrollTop());
}});

here is my fiddle!

black color background bar to be stuck at the top of the page

please help me out to fix that, thank you in advance.

I have a navigation bar after header and i want that to be stuck at top of the page while scrolling down.

can i do with position:relative?? Unlike position:fixed with the help of the following script or any other better way?

$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
    $('#header').css('top', $(window).scrollTop());
}});

here is my fiddle!

black color background bar to be stuck at the top of the page

please help me out to fix that, thank you in advance.

• javascript
• jquery
• html
• css

• Take a look at StickyJS. – Hashem Qolami Commented Dec 15, 2013 at 12:35
• @HashemQolami Thanks for the link, can i use that plugin for a mercial website?? – stacky Commented Dec 15, 2013 at 12:48
• @HashemQolami It would be more helpful for me without plugin's, is that possible with my given fiddle? please! – stacky Commented Dec 15, 2013 at 13:00
• Why can't you simply use position: fixed;? – Mouagip Commented Dec 15, 2013 at 13:18
• @Mouagip i have used position:fixed but it isn't moving to the top of the browser getting stuck at the origin location. And also after zoom-in nav elements are not scrolling vertically with respect to page. – stacky Commented Dec 15, 2013 at 13:22

2 Answers 2

Is this what you're trying to get?

window.onscroll = changePos;

function changePos() {
    var header = document.getElementById("header");
    if (window.pageYOffset > 70) {
        header.style.position = "fixed";
        header.style.top = "0";
    } else {
        header.style.position = "";
        header.style.top = "";
    }
}

Update: (I think, not sure) you can't scroll a fixed element, but you can an absolute one. So in the code below we're using position: absolute but making it behave like it's fixed. Now you can see the #header when you zoom in and scroll down.

window.onscroll = changePos;

function changePos() {
    var header = document.getElementById("header");
    if (window.pageYOffset > 70) {
        header.style.position = "absolute";
        header.style.top = pageYOffset + "px";
    } else {
        header.style.position = "";
        header.style.top = "";
    }
}

FIDDLE

you can solve it with css:

html:

    <nav id= "header">
      <ul>
        <li><a href="#"> Link 1 </a></li>
        <li><a href="#"> Link 2 </a></li>
        <li><a href="#"> Link 3 </a></li>
      </lu>
    </nav>

css:

    #header{
    position: sticky;
    top: 0; /* Position where u want it to stick, can be a
               percentage, px, vh or any position unit */
    z-index:150; /* to keep it on top layer in order not to be 
                    masked by another element*/
    }

check this link: https://elextutorial./learn-css/css-position-fixed-scroll-sticky/