javascript - 当导航栏固定在滚动顶部时添加品牌标志和 li

Question

<div class="container" id="menubar_1">
                <nav class="navbar navbar-inverse" id="menubar_1">
                    <!-- Brand and toggle get grouped for better mobile display -->
                    <div class="navbar-header">
                      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" 
                      data-target="#main_menu" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                      </button>
                     <a class="navbar-brand" href="#"><img src="assets/images/logo.png" alt="logo" /></a>
                    </div>

                    <!-- Collect the nav links, forms, and other content for toggling -->
                    <div class="collapse navbar-collapse" id="main_menu">
                      <ul class="nav navbar-nav menu_bar text-uppercase">
                        <li class="active"><a href="#">adfadad</a></li>
                        <li><a href="#">adfafaf</a></li>
                        <li><a href="#">adadfa</a></li>
                        <li><a href="#">ada</a></li>
                        <li class="contact_us"><a href="#">adfadfadf</a></li>
                      </ul>
                    </div><!-- /.navbar-collapse -->
                </nav>
             </div>

通常导航栏进入没有 barnd-logo 和 li 的最后一个 child 的容器。我想要当导航栏滚动到顶部容器类时的结果将被删除并且 navbar-brand，li 的最后一个 child 将被添加到导航栏中。我将尝试下面给出的这个 js。

var distance = $('#menubar_1').offset().top; 

    $(window).scroll(function () {

         if ($(window).scrollTop() >= distance) {
             $('#menubar_1').addClass("fixed_top");
             $('#menubar_1').removeClass("container");
             $('#menubar_1').addClass("navbar-brand");
             $('#menubar_1').addClass("contact_us");
         } else {
             $('#menubar_1').removeClass("fixed_top");
             $('#menubar_1').addClass("container");
             $('#menubar_1').removeClass("navbar-brand");
             $('#menubar_1').removeClass("contact_us");
         }
     });

然后固定顶部的 css 就在这里:

.fixed_top {
    width: 100%;
    height: 50px;
    top: 0px;
    position: fixed;
    overflow: visible!important;
    z-index: 9998;
    background: #fff;
    padding-top:15px;
    padding-bottom: 15px;
}

请帮我写脚本

Answer 1

终于找到答案了

 <script>
        var distance = $('#menubar_1').offset().top; 

        $(window).scroll(function () {

             if ($(window).scrollTop() >= distance) {
                 $('#menubar_1').addClass("navbar-fixed-top");
                 $('#menubar_1').removeClass("container");
                 $('.navbar-brand').css("float" , "none");
                 $('.navbar-brand').css("display" , "block");
                 $('.contact_us').css("display" , "block");
             } else {
                 $('#menubar_1').removeClass("navbar-fixed-top");
                 $('#menubar_1').addClass("container");
                 $('.navbar-brand').css("display" , "none");
                 $('.contact_us').css("display" , "none");
             }
         });
    </script>