发生滚动后，如何固定div（菜单）的位置？

Question

I'm making a theme for a website and I was given permission to play with the HTML files. The thing is I'm just familiarised with CSS and HTML, but I'm a complete noob when it comes to Javascript, JQuery, etc. and, sadly, it seems I need those to add some features I want.

I'd like a menu that works like this one: https://www.planetside2.com/news

The HTML is basically this:

<div id="wrap">
 <div id="page-header">
  <div class="headerbar">
 </div>
</div>

And plenty stuff inside, but I hope the containers are enough

This is the CSS:

#wrap {
    margin: 0 auto;
    width: 1024px;
}

.headerbar {
    background: url("{T_THEME_PATH}/images/headerbarbg.png") no-repeat ;
    background-position: center;
    width: 1054px;
    margin:0 -15px;
    margin-top:3px;
    height: 120px;
    position: relative;
    padding-top: 70px;
}

I've checked out some other solutions, but, as I said, I'm a complete noob at scripting and when I try to apply such scripts to the theme, they don't work, most likely because there are some things that I should change that I don't know (except classes and IDs, of course).

I hope someone can help me.

Answer 1

First of all you need to detect scrolling and window resize

$(document).ready(function(){

    $(window).on("scroll resize", function(e){

        var elem = $(".headerbar");

        // check if your header is visible by subtracting
        // the top offset of your div from the scrolltop distance
        if ((elem.offset().top - $(window).scrollTop()) <= 0 && elem.css("position") !== "fixed") {
            console.log("not visible");
            elem.css({
                position:"fixed",
                "z-index":"9999",
                top:"0px"
            });
        // check if your header height is greater or equal to the scrolltop distance
        } else if (elem.height() >= $(window).scrollTop()) {
            console.log("visible");
            elem.css({
                position:"relative"
            });
        }

    });

})

And here is a simple demo: JSFIDDLE

Answer 2

Some thing i have done previously in fiddle just check this one out will help you to have a scratch.

$(document).ready(function () {
    var top_fixed;
    if ($('#header-con').length > 0)
    {
        top_fixed = $('#header-con').offset().top;
    }
    $(window).scroll(function () {
        if ($('#header-con').length > 0)
        {
            $('#header-con').toggleClass('fixed', $(window).scrollTop() > top_fixed);

        }
    });
});

DEMO

Answer 3

This short jquery code is what you need. Tested and was working in a website i had develop lately.

$(window).scroll(function() {
    if($(window).scrollTop() != 0) {
        $('#fixed-menu-top').css('position', 'fixed').fadeIn();
    } else {
        $('#fixed-menu-top').css('position', 'absolute').fadeOut();
    }
});

Just edit the ids to yours ex #fixed-menu-top to #wrap or any ids in ypur mark up

See website