Sticky Header for Different Device


$(document).ready(function() {



    var height = $("#header").outerHeight();
    // Header Sticky


    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");
                    $(".other_content").css({
                        "margin-top": height
                    });
                } else {
                    $('#header').removeClass("sticky");
                    $(".other_content").css({
                        "margin-top": 0
                    });
                }
            });


        });



    } else {

        // all big device after 991px
        $(document).ready(function() {

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

    }




});

Comments