使用Jquery从stick到non-stick的平滑过渡

$(document).ready(function(){       
 var scroll_start = 0;
 var startchange = $('.nav');
 var offset = startchange.offset();
 $(document).scroll(function() { 
    scroll_start = $(this).scrollTop();
    if(scroll_start > offset.top) {
        $('.effect').css({'background-color', '#FFF', 
        'box-shadow', '0px 0px 10px 1px #eae7e7',
        'transition', 'all 0.5s ease'
        });
     } 
     else {
        $('.effect').css({'background-color', 'transparent',
        'box-shadow', 'none',
        'transition', 'all 0.5s ease'
        });
     }
 });

<nav class="effect navbar navbar-default ">
   <div class="container-fluid nav">
  <!-- 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="#bs-example-navbar-collapse-1" 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="#"></a>
  </div>

  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <ul class="nav navbar-nav">
    <li><a href="#home">HOME</a></li>
    <li><a href="#about"><i class="fa fa-user" aria-hidden="true"></i> ABOUT</a></li>
    <li><a href="#protfolio"><i class="fa fa-bars" aria-hidden="true"></i> PROTFOLIO</a></li>
    <li><a href="#contact"><i class="fa fa-envelope" aria-hidden="true"></i> CONTACT</a></li>
    </ul>
    <ul class="nav navbar-nav navbar-right">
    <li><a href="#"><i class="fa fa-search"></i></a></li>
    </ul>
  </div><!-- /.navbar-collapse -->

  </div><!-- /.container-fluid -->
</nav>