Fixed header when scrolling page

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.

Html


    <section>
        <div class="sticky">
        <header>
            
            <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>

                    <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>
                    <div class="col-auto  h-100 p-0 pr-2 user-name"><span id="spnMainUserName"></span></div>
                </div>


            </div>
            <nav>
                
            </nav>

        </header>
        <div class="col-12 p-0 m-0 float-left menu-holder no-default">
            <div class="container">
                <div id="divMenu" class="menu"></div>
            </div>
        </div>

        </div>
        <div>
            <main role="main">
                @RenderBody()
            </main>
        </div>
    </section>

Css

 <style>

        body {
            margin: 0;
        }

        section {
            height: 1000px;
            padding-top: 0px;
        }

        .sticky {
            background: orange;
        }

        .fixed {
            ;
            top: 0;
            left: 0;
            width: 100%;
        }
    </style>

Jquery

 $(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.

Answer 1

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.

Thanks!