在固定页眉上平滑滚动

Question

How to create jQuery fixed header with smooth scroll. There are 2 menu bar but i want top blue as fixed with smooth scroll. I also need width: 100%; with fixed position but everything will be changed in result after doing so.

The result also showing some vertical blue line alongwith "Text 8" that is hurting menubar.

 //<![CDATA[ $(function() { var nav = $('#icbabdrop'); var navHomeY = nav.offset().top; var isFixed = false; var $w = $(window); $w.scroll(function() { var scrollTop = $w.scrollTop(); var shouldBeFixed = scrollTop > navHomeY; if (shouldBeFixed && !isFixed) { nav.css({ position: 'fixed', top: 0, }); isFixed = true; } else if (!shouldBeFixed && isFixed) { nav.css({ position: 'static' }); isFixed = false; } }); }); //]]> 

 #icbabdrop { height: 49px; background-color: #0093DE; z-index: 1000; text-align: left; width: 1150px; margin-left: -32px; } .tabs-inner .widget ul#icbabdrop { text-align: left; display: inline; margin: 0; padding: 15px 4px 17px 0; list-style: none; border: none; } .tabs-inner .widget ul#icbabdrop li { font-size: 12px; color: #fff; font-family: sans-serif; /* Font for the menu */ display: inline-block; margin-right: -4px; height: 49px; margin-top: -1px; padding: 15px 10px; margin-left: 0px; cursor: pointer; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; text-align: left; float: left; } .tabs-inner .widget ul#icbabdrop li a { padding: 0; font-family: sans-serif; /* Font for the menu links */ border: 0; color: #fff; font-weight: bold; } .tabs-inner .widget ul#icbabdrop li:hover { background: #fff; /* background colour when you roll over a menu title */ color: #0093DE; /* font colour when you roll over a menu title */ } .tabs-inner .widget ul#icbabdrop li:hover a { background: transparent; height: 49px; color: #0093DE; /* font colour when you roll over a menu title */ } .tabs-inner .widget ul#icbabdrop li ul { z-index: 1000; border: none; padding: 0; position: absolute; top: 45px; left: 30px; float: none; width: 150px; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; display: none; opacity: 0; visibility: hidden; -webkit-transiton: opacity 0.2s; -moz-transition: opacity 0.2s; -ms-transition: opacity 0.2s; -o-transition: opacity 0.2s; -transition: opacity 0.2s; } .tabs-inner .widget ul#icbabdrop li ul li { background: #555; /* background colour of the sub menu items */ display: block; color: #fff; /* font colour of the sub menu items */ text-shadow: 0 -1px 0 #000; } ul#icbabdrop li ul li a { color: #fff/* link colour of the sub menu items */ } .tabs-inner .widget ul#icbabdrop li ul li:hover { background: #666; /* background colour when you roll over sub menu items */ } .tabs-inner .widget ul#icbabdrop li:hover ul { display: block; opacity: 1; visibility: visible; } .search-top { margin-top: -8px; float: top; text-align: left; margin-right: 10px; list-style-type: none; } .navbar-header-left { float: left; height: 50px; line-height: 40px; width: 200px; margin-top: -5px; } #black-menu { background: #203545; width: 1150px; box-sizing: border-box; height: 26px; text-align: left; float: left; overflow: hidden; margin-top: -35px; margin-left: -30px; } .sec-menu { font: normal normal 13px Open Sans Condensed, Arial, sans-serif; padding: 0 0; background: #203545; margin: 0 auto; overflow: hidden; } .sec-nav-menu { list-style-type: none; margin: 0 0 0 0; padding: 0 0 0 0; } .sec-nav-menu li { display: inline-block; text-transform: uppercase; padding: 1px 0 1px 20px; line-height: 16px; position: relative; } .sec-nav-menu li a { color: #fff; text-decoration: none; margin-bottom: 5px; } .sec-nav-menu li a:hover { text-decoration: underline; } .program-below-name-container { font-style: italic; letter-spacing: -.4px; padding-left: -1px; margin-left: 10px; float: right; text-align: right; font-size: 12px; } .bold { font-weight: 600 } .green, .green a { color: #6aab0c!important } #top-logo { margin-top: -25px; } #search-form { background: #0093DE; float: right; margin-left: 50px; margin-top: -10px; height: 36px; width: 220px; text-align: right; float: right; } #search-form table { width: 100%; margin: 0 0 0 0; } #search-form td.search-box { padding-right: 30px; } #search-form input#search-box[type="text"] { background: #ffffff; height: 36px; line-height: 36px; margin: 5px 0 5px 10px; padding: 0 10px; width: 99%; color: #666666; border: none; } #search-form input#search-button[type="submit"] { font-family: FontAwesome; background: #FF4F4F; color: #ffffff; height: 36px; line-height: 36px; margin: 5px 10px 5px 0; padding: 0 12px; border: none; outline: none; -o-transition: all 0.25s; -moz-transition: all 0.25s; -webkit-transition: all 0.25s; } #search-form input#search-button[type="submit"]:hover { background: #222222; cursor: pointer; } #search-form input#search-box[type="text"]:focus { background: #eee; outline: none; } #post { margin-top: 50px; height: 150vh; } 

 <div id='wrapper'> <div class='tabs-outer'> <div class='fauxborder-left tabs-fauxborder-left'> <div class='fauxborder-right tabs-fauxborder-right'></div> <div class='region-inner tabs-inner'> <div class='tabs section' id='crosscol' name='Cross-Column'> <div class='widget HTML' data-version='1' id='HTML5'> <div id='icbabdrop'> <a class='navbar-brand' href='/'><li class='navbar-header-left' style='list-style-type:none;'> <img alt='logo' src='https://3.bp.blogspot.com/-GZZB4Fretr0/Wtzna9N4keI/AAAAAAAAAMc/IjDcb0KlT-gbFtWB4n_7CuIPbFDWPROKACLcBGAs/s1600/Google_Logo.png'/> </li> </a> <ul id='icbabdrop'> <li style='margin-left:60px;'><a href='#?&ampmax-results=8' rel='nofollow'>Text 1</a> </li> <li><a href='#?&ampmax-results=8' rel='nofollow'>Text 2</a> </li> <li><a href='#?&ampmax-results=8' rel='nofollow'>Text 3</a> </li> <li><a href='#?&ampmax-results=8' rel='nofollow'>Text 4</a> </li> <li><a href='#?&ampmax-results=8' rel='nofollow'>Text 5</a> </li> <li><a href='#?&ampmax-results=8' rel='nofollow'>Text 6</a> </li> <li><a href='#?&ampmax-results=8' rel='nofollow'>Text 7</a> </li> <li><a href='#?&ampmax-results=8' rel='nofollow'>Text 8</a> </li> </ul> <li class='search-top'> <form action='/search' id='search-form' method='get'> <table> <tbody> <tr> <td class='search-box'> <input id='search-box' name='q' onblur='if(this.value==&#39;&#39;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&#39;&#39;;' type='text' value='Search...' vinput=''/> </td> <td class='search-button'> <input id='search-button' type='submit' value='Go'/> </td> </tr> </tbody> </table> </form> </li> </div> </div> </div> </div> </div> </div> <div id='black-menu'> <nav class='sec-menu'> <ul class='sec-nav-menu'> <li class=''><a href='#'>Black 1</a></li> <li class=''><a href='#'>Black 2</a></li> <li class=''><a href='#'>Black 3</a></li> <li class=''><a href='#'>Black 4</a></li> <li class=''><a href='#'>Black 5</a></li> </ul> </nav> </div> <div id='post'>> Sugar plum muffin cookie pastry oat cake icing candy canes chocolate. Gummi bears chupa chups fruitcake dessert jelly. Muffin cookie ice cream soufflé pastry lollipop gingerbread sweet. Unerdwear.com bonbon candy marzipan bonbon gummies chocolate cake gummi bears powder. Unerdwear.com tart halvah chocolate cake dragée liquorice. Sugar plum chocolate bar pastry liquorice dragée jelly powder. Jelly tootsie roll applicake caramels. Marzipan candy tootsie roll donut. Gummies ice cream macaroon applicake. </div> <script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'></script> 

Answer 1

You can simply achieve this without using Javascript:

HTML

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<style type="text/css">
    img {
        max-width: 100%;
    }
    header {
        background-color: #0093DE;
        padding: 5px 0px;
        transition: all ease .3s;
        position: fixed;
        width: 100%;
        z-index: 999;
        top: 0;
        left: 0;
    }
    header .nav {
        float: left;
    }
    header .searchbar {
        float: right;
        margin-top: 10px;
    }
    header nav ul {
        margin: 10px 0 0 0;
        padding: 0;
    }
    header nav ul li {
        display: inline-block;
        margin-right: 15px;
    }
    header nav ul li a {
        color: #fff;
    }
    .sub-nav {
        background-color: #203545;
        padding: 5px 0px;
    }
    .sub-nav ul {
        padding: 0;
        margin: 0;
    }
    .sub-nav ul li {
        display: inline-block;
        margin-right: 15px;
    }
    .sub-nav ul li a {
        color: #fff;
    }
    body {
        padding-top: 65px;
    }
</style>
<body>
    <header>
        <div class="container">
            <div class="row">
                <div class="col-sm-2">
                    <div class="site-logo">
                        <img src="https://3.bp.blogspot.com/-GZZB4Fretr0/Wtzna9N4keI/AAAAAAAAAMc/IjDcb0KlT-gbFtWB4n_7CuIPbFDWPROKACLcBGAs/s1600/Google_Logo.png" width="200px" />
                    </div>
                </div>
                <div class="col-sm-10">
                    <div class="nav">
                        <nav>
                            <ul>
                                <li><a href="#">text 1</a></li>
                                <li><a href="#">text 2</a></li>
                                <li><a href="#">text 3</a></li>
                                <li><a href="#">text 4</a></li>
                                <li><a href="#">text 5</a></li>
                                <li><a href="#">text 6</a></li>
                                <li><a href="#">text 7</a></li>
                                <li><a href="#">text 8</a></li>
                            </ul>
                        </nav>
                    </div>
                    <div class="searchbar">
                        <input type="text" name="s" placeholder="Search here" />
                        <button type="submit" class="btn btn-sm">Go</button>
                    </div>
                </div>
            </div>
        </div>
    </header>
    <section class="sub-nav">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <nav>
                        <ul>
                            <li><a href="#">black 1</a></li>
                            <li><a href="#">black 2</a></li>
                            <li><a href="#">black 3</a></li>
                            <li><a href="#">black 4</a></li>
                            <li><a href="#">black 5</a></li>
                            <li><a href="#">black 6</a></li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>      
    </section>
    <section class="page-content mt-3">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in finibus sapien, eu sodales magna. Nullam eros metus, laoreet sit amet luctus id, imperdiet vulputate purus. Nullam felis lectus, vestibulum vitae ultrices vitae, convallis a eros. Curabitur sit amet bibendum magna, nec facilisis ligula. Cras pellentesque nec augue in tempor. Fusce a lectus nec metus suscipit ultricies. Vestibulum semper, nulla id fermentum placerat, velit felis consectetur massa, non egestas felis metus at enim. Donec sit amet metus mi. Aliquam ac lacinia tellus. Aenean suscipit vulputate lacus eu gravida. Vestibulum turpis nisl, sollicitudin id aliquet eu, fringilla sit amet lacus. Praesent aliquam, eros blandit faucibus volutpat, lacus sem consectetur nisl, nec scelerisque velit nunc nec neque. Maecenas egestas erat a velit auctor, et scelerisque mi eleifend. Sed ornare lorem at augue ultricies congue. Curabitur ac lacus imperdiet, bibendum elit ut, aliquam lorem.</p>

                        <p>Duis imperdiet tellus dapibus augue porttitor, quis interdum nisl cursus. Ut aliquet velit a mattis faucibus. Ut lectus urna, pellentesque nec congue in, tempor nec erat. Sed facilisis malesuada tempor. Sed ultricies risus odio, ut euismod lacus sollicitudin quis. Donec dictum purus sed ligula tempor, non vehicula magna facilisis. Nunc quis odio eu magna dignissim volutpat ut sed orci. Nullam tempor a nibh cursus condimentum. Ut aliquet ex id ipsum lobortis, sed aliquam leo volutpat. Aenean sed diam augue.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in finibus sapien, eu sodales magna. Nullam eros metus, laoreet sit amet luctus id, imperdiet vulputate purus. Nullam felis lectus, vestibulum vitae ultrices vitae, convallis a eros. Curabitur sit amet bibendum magna, nec facilisis ligula. Cras pellentesque nec augue in tempor. Fusce a lectus nec metus suscipit ultricies. Vestibulum semper, nulla id fermentum placerat, velit felis consectetur massa, non egestas felis metus at enim. Donec sit amet metus mi. Aliquam ac lacinia tellus. Aenean suscipit vulputate lacus eu gravida. Vestibulum turpis nisl, sollicitudin id aliquet eu, fringilla sit amet lacus. Praesent aliquam, eros blandit faucibus volutpat, lacus sem consectetur nisl, nec scelerisque velit nunc nec neque. Maecenas egestas erat a velit auctor, et scelerisque mi eleifend. Sed ornare lorem at augue ultricies congue. Curabitur ac lacus imperdiet, bibendum elit ut, aliquam lorem.</p>

                        <p>Duis imperdiet tellus dapibus augue porttitor, quis interdum nisl cursus. Ut aliquet velit a mattis faucibus. Ut lectus urna, pellentesque nec congue in, tempor nec erat. Sed facilisis malesuada tempor. Sed ultricies risus odio, ut euismod lacus sollicitudin quis. Donec dictum purus sed ligula tempor, non vehicula magna facilisis. Nunc quis odio eu magna dignissim volutpat ut sed orci. Nullam tempor a nibh cursus condimentum. Ut aliquet ex id ipsum lobortis, sed aliquam leo volutpat. Aenean sed diam augue.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in finibus sapien, eu sodales magna. Nullam eros metus, laoreet sit amet luctus id, imperdiet vulputate purus. Nullam felis lectus, vestibulum vitae ultrices vitae, convallis a eros. Curabitur sit amet bibendum magna, nec facilisis ligula. Cras pellentesque nec augue in tempor. Fusce a lectus nec metus suscipit ultricies. Vestibulum semper, nulla id fermentum placerat, velit felis consectetur massa, non egestas felis metus at enim. Donec sit amet metus mi. Aliquam ac lacinia tellus. Aenean suscipit vulputate lacus eu gravida. Vestibulum turpis nisl, sollicitudin id aliquet eu, fringilla sit amet lacus. Praesent aliquam, eros blandit faucibus volutpat, lacus sem consectetur nisl, nec scelerisque velit nunc nec neque. Maecenas egestas erat a velit auctor, et scelerisque mi eleifend. Sed ornare lorem at augue ultricies congue. Curabitur ac lacus imperdiet, bibendum elit ut, aliquam lorem.</p>

                        <p>Duis imperdiet tellus dapibus augue porttitor, quis interdum nisl cursus. Ut aliquet velit a mattis faucibus. Ut lectus urna, pellentesque nec congue in, tempor nec erat. Sed facilisis malesuada tempor. Sed ultricies risus odio, ut euismod lacus sollicitudin quis. Donec dictum purus sed ligula tempor, non vehicula magna facilisis. Nunc quis odio eu magna dignissim volutpat ut sed orci. Nullam tempor a nibh cursus condimentum. Ut aliquet ex id ipsum lobortis, sed aliquam leo volutpat. Aenean sed diam augue.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in finibus sapien, eu sodales magna. Nullam eros metus, laoreet sit amet luctus id, imperdiet vulputate purus. Nullam felis lectus, vestibulum vitae ultrices vitae, convallis a eros. Curabitur sit amet bibendum magna, nec facilisis ligula. Cras pellentesque nec augue in tempor. Fusce a lectus nec metus suscipit ultricies. Vestibulum semper, nulla id fermentum placerat, velit felis consectetur massa, non egestas felis metus at enim. Donec sit amet metus mi. Aliquam ac lacinia tellus. Aenean suscipit vulputate lacus eu gravida. Vestibulum turpis nisl, sollicitudin id aliquet eu, fringilla sit amet lacus. Praesent aliquam, eros blandit faucibus volutpat, lacus sem consectetur nisl, nec scelerisque velit nunc nec neque. Maecenas egestas erat a velit auctor, et scelerisque mi eleifend. Sed ornare lorem at augue ultricies congue. Curabitur ac lacus imperdiet, bibendum elit ut, aliquam lorem.</p>

                        <p>Duis imperdiet tellus dapibus augue porttitor, quis interdum nisl cursus. Ut aliquet velit a mattis faucibus. Ut lectus urna, pellentesque nec congue in, tempor nec erat. Sed facilisis malesuada tempor. Sed ultricies risus odio, ut euismod lacus sollicitudin quis. Donec dictum purus sed ligula tempor, non vehicula magna facilisis. Nunc quis odio eu magna dignissim volutpat ut sed orci. Nullam tempor a nibh cursus condimentum. Ut aliquet ex id ipsum lobortis, sed aliquam leo volutpat. Aenean sed diam augue.</p>
                </div>
            </div>
        </div>
    </section>
</body>
</html>

I have used the Bootstrap framework to manage the CSS. If you want to achieve this using Javascipt you can add below code:

JS

<script type="text/javascript">
        $(function(){
            $(window).scroll(function(){
                var scrollPos = $(window).scrollTop();
                if(scrollPos > 100) {
                    $("body").addClass('static-header');
                } else {
                    $("body").removeClass('static-header');
                }
            })
        })
    </script>

Hope this may help you.