滚动平滑动画

Question

我有一个带有导航功能的导航栏，该功能通过添加一个名为“ shrink”的类来滚动更改其大小，效果很好，但是当它添加该类并更改其大小时，它发生得很快，这对我来说并不好，我想使此动画平滑以使缩小的外观更好看，但不适用于我，这是我的代码：

 $(window).scroll(function() { if ($(document).scrollTop() > 50) { $('nav').addClass('shrink'); } else { $('nav').removeClass('shrink'); } }); 

 body { padding-top: 50px; min-height:800px } nav a { padding-top: 20px !important; padding-bottom: 20px !important; font-size: 18px; } nav .navbar-toggle { margin: 13px 15px 13px 0; } .navbar-brand { font-size: 30px; } nav.navbar.shrink { min-height: 35px; } nav.shrink a { padding-top: 10px !important; padding-bottom: 10px !important; font-size: 15px; } nav.shrink .navbar-brand { font-size: 25px; } nav.shrink .navbar-toggle { padding: 4px 5px; margin: 8px 15px 8px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav pull-right"> <li class="active"><a href="#">Home</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="text-center"> <h1>Bootstrap starter template</h1> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> <div class="text-center"> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> </div> 

Answer 1

检查一下。 我只在这里添加transition 。

 $(window).scroll(function() { if ($(document).scrollTop() > 50) { $('nav').addClass('shrink'); } else { $('nav').removeClass('shrink'); } }); 

 body { padding-top: 50px; min-height:800px } nav a { padding-top: 20px !important; padding-bottom: 20px !important; font-size: 18px; } nav .navbar-toggle { margin: 13px 15px 13px 0; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } .navbar-brand { font-size: 30px; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } nav.navbar.shrink { min-height: 35px; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; transition: all 0.3s; } nav.shrink a { padding-top: 10px !important; padding-bottom: 10px !important; font-size: 15px; } nav.shrink .navbar-brand { font-size: 25px; } nav.shrink .navbar-toggle { padding: 4px 5px; margin: 8px 15px 8px 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <nav class="navbar navbar-inverse navbar-fixed-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav pull-right"> <li class="active"><a href="#">Home</a></li> </ul> </div><!--/.nav-collapse --> </div> </nav> <div class="container"> <div class="text-center"> <h1>Bootstrap starter template</h1> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> <div class="text-center"> <p class="lead">Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p> </div> </div>