向下滚动时缩小导航栏（引导程序3）
我想build立一个导航栏效果，就像在我的页面上的http://dootrix.com/ （向下滚动栏越来越小，徽标发生变化）。 我使用引导3我的网页。 有一个简单的方法来实现它与引导？
粘滞的导航栏：
要制作一个粘性导航，你需要添加navbar-fixed-top类到你的导航
官方文件 ：
http://getbootstrap.com/components/#navbar-fixed-top
官方示例 ：
http://getbootstrap.com/examples/navbar-fixed-top/
一个简单的示例代码 ：
<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container"> ... </div> </nav> 与相关的jsfiddle ： http : //jsfiddle.net/ur7t8/
调整导航栏的大小：
如果您希望导航栏在滚动页面的同时resize，则可以查看此示例： http : //www.bootply.com/109943
JS
$(window).scroll(function() { if ($(document).scrollTop() > 50) { $('nav').addClass('shrink'); } else { $('nav').removeClass('shrink'); } });
CSS
nav.navbar.shrink { min-height: 35px; }
animation：
要在滚动时添加animation，只需在导航中设置一个转场即可
CSS
nav.navbar{ background-color:#ccc; // Animation -webkit-transition: all 0.4s ease; transition: all 0.4s ease; }
我做了一个完整的示例代码jsfiddle ： http : //jsfiddle.net/Filo/m7yww8oa/
toggleClass也起作用：
$(window).on("scroll", function() { $("nav").toggleClass("shrink", $(this).scrollTop() > 50) });
你可以结合“滚动”和“滚动”事件，以达到预期的效果：
$(window).on("scroll",function(){ $('nav').addClass('shrink'); }); $(window).on("scrollstop",function(){ $('nav').removeClass('shrink'); });
如果你正在使用AngularJS，而你正在使用Angular Bootstrap： https ： //angular-ui.github.io/bootstrap/
你可以这样做这么好：
HTML：
<nav id="header-navbar" class="navbar navbar-default" ng-class="{'navbar-fixed-top':scrollDown}" role="navigation" scroll-nav> <div class="container-fluid top-header"> <!--- Rest of code ---> </div> </nav>
CSS：（ 请注意，在这里我使用填充作为更大的导航收缩没有填充，你可以修改，只要你想）
nav.navbar { -webkit-transition: all 0.4s ease; transition: all 0.4s ease; background-color: white; margin-bottom: 0; padding: 25px; } .navbar-fixed-top { padding: 0; }
然后添加你的指令
指令 🙁 注意，您可能需要将this.pageYOffset >= 50从50改为更多或更less以满足您的需求）
angular.module('app') .directive('scrollNav', function ($window) { return function(scope, element, attrs) { angular.element($window).bind("scroll", function() { if (this.pageYOffset >= 50) { scope.scrollDown = true; } else { scope.scrollDown = false; } scope.$apply(); }); }; });
这将很好地完成这项工作，animation和酷的方式。
对于那些不愿意使用jQuery的人来说，这是一个使用classList来做同样工作的Vanilla Javascript方法：
function runOnScroll() { var element = document.getElementsByTagName('nav') ; if(document.body.scrollTop >= 50) { element[0].classList.add('shrink') } else { element[0].classList.remove('shrink') } console.log(topMenu[0].classList) };
使用切换可能有更好的方法，但上述工作正常
我正在使用这个代码为我的项目
$(window).scroll ( function() { if ($(document).scrollTop() > 50) { document.getElementById('your-div').style.height = '100px'; //For eg } else { document.getElementById('your-div').style.height = '150px'; } } );
可能这会有所帮助
