Sticky header for home page banner behind header


var height = $("#header").outerHeight();
if (window.matchMedia('(max-width: 991px)').matches) {


    //in mobile to tablet device 0 to 991px device 

    // if sticky class added in html otherwise not need this first line

    $('#header').removeClass("sticky");
    $(document).ready(function() {



        // Header Sticky
        $(window).scroll(function() {
            if ($(this).scrollTop() > 0) {
                $('#header').addClass("sticky");
                $(".banner_wapper").css({
                    "margin-top": height
                });
            } else {
                $('#header').removeClass("sticky");
                $(".banner_wapper").css({
                    "margin-top": 0
                });
            }
        });



    });



} else {

    // all big device after 991px

    $(document).ready(function() {
        $(window).scroll(function() {
            if ($(this).scrollTop() > height) {
                $('#header').addClass("home-sticky");

            } else {
                $('#header').removeClass("home-sticky");

            }
        });
    });

}

Comments