Fixed header when scrolling page RRS feed

  • Question

  • User-257070954 posted

    In my application i want to fix position of header if we scroll page. in my code when i scroll header is fixed but its going background ans data's are moving over the header. Below i am giving my related css,html and j query code.

            <div class="sticky">
                <div class="container h-100 p-0">
                    <div class="row m-0 p-0 h-100">
                        <div class="col-auto  h-100 p-0">
                            <button class="hamburger h-100">&#9776; </button>
                            <button class="cross h-100">&#735;</button>
                        <div class="col h-100 p-0 text-center site-head" style="margin-top:0">
                            <img src="../Images/EKadaLogo4.png" height="55" width="180" />
                        <div class="col-auto  h-100 p-0 pr-2 user-name"><span id="spnMainUserName"></span></div>
            <div class="col-12 p-0 m-0 float-left menu-holder no-default">
                <div class="container">
                    <div id="divMenu" class="menu"></div>
                <main role="main">


            body {
                margin: 0;
            section {
                height: 1000px;
                padding-top: 0px;
            .sticky {
                background: orange;
            .fixed {
                top: 0;
                left: 0;
                width: 100%;


     $(window).scroll(function () {
            var sticky = $('.sticky'),
                scroll = $(window).scrollTop();
            if (scroll >= 100) sticky.addClass('fixed');
            else sticky.removeClass('fixed');

    I am writing these codes in _layout.cshtml.

    Monday, August 17, 2020 9:15 AM

All replies

  • User-1151440187 posted

    I suggest you to use bootstrap for best css styles.

    I have written the code : https://jsfiddle.net/5crqndfz/1/

    I you have any doubt then you can ask freely.

    Hope it'll help you.


    Tuesday, August 18, 2020 4:21 AM