滾動 nav fixed

$(document).ready(function(){

    $(window).scroll (function() {
        if ($(window).scrollTop()>685) {
            $('.navbar-dark').addClass('navbar-fixed-top');
        }
        if ($(window).scrollTop()<686) {
            $('.navbar-dark').removeClass('navbar-fixed-top');
    }
     
    });

 
    /* nav script */
 
    $(function() {
        $('a[href*="#"]:not([href="#"])').click(function() {
            if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
              var target = $(this.hash);
              target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
              if (target.length) {
                $('html, body').animate({
                  scrollTop: target.offset().top -35
                }, 1000);
                return false;
              }
    }
  });
});


可以在  nav bar 上面放一個 高為  686 px   的 區塊....

一開始可以看到那個區塊 ... 當滑鼠往下滑的時候...  nav 就固定在top


=====================================================

漢堡  button

<button class="navbar-toggler hidden-sm-up" data-toggle="collapse" data-target="#exCollapsingNavbar" aria-controls="exCollapsingNavbar" aria-expanded="false" aria-label="Toggle navigation"></button>


hidden-sum-up 是說當 sm 以上的解析度時 ..就把這個button 隱藏



float-xs-left :  當螢幕為xs  時..  會往左邊對齊

float-sm-right :  當螢幕為sm  時..  會往右邊對齊


 <div class="collapse navbar-toggleable-xs clear-nav" id="exCollapsingNavbar">            
        <div class="col-md-8">
            <ul class="nav navbar-nav float-xs-left float-sm-right">
                <li class="nav-item">
                    <a href="#about-us">關於我們</a>
                </li>
                <li class="nav-item">
                    <a href="#main-menu">菜單</a>
                </li>
                <li class="nav-item">
                    <a href="#section-meals">美味圖片</a>
                </li>
                <li class="nav-item">
                    <a href="#contact">聯絡我們</a>
                </li>
            </ul>
        </div>  
        </div>

這個id 要和   button 的id 一樣

exCollapsingNavbar


css :


向右靠齊 (那個漢堡 button)

.navbar-toggler {
    float: right;
}


然後在xs 的解析度...加入  clear float


/*small phone :from 0 to 496px */
@media only screen and (max-width: 496px) {

  .clear-nav {
        clear: both;
    }

}


當螢幕是xs時 ...  點進去摺疊的選單後... 跑出來的選單才不會往上跑