我想在我的页面上建立一个像http://dootrix.com/一样的导航栏效果(在向下滚动栏变小和徽标更改后)。我使用bootstrap 3为我的页面。是否有一个简单的方法来实现它与引导?
滚动导航条:
你需要添加类navbar-fixed-top到你的nav
官方文档:
https://getbootstrap.com/docs/5.0/components/navbar/放置
官方示例:
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/
调整导航条大小:
如果你想在滚动页面时调整导航栏的大小,你可以看看这个例子: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;
}
动画:
要在滚动时添加动画,只需在导航
上设置一个过渡CSSnav.navbar{
background-color:#ccc;
// Animation
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
我用完整的示例代码制作了一个jsfiddle: http://jsfiddle.net/Filo/m7yww8oa/
toggleClass works too:
$(window).on("scroll", function() {
$("nav").toggleClass("shrink", $(this).scrollTop() > 50)
});
对于那些不愿意使用jQuery的人,这里有一个香草Javascript方法来做同样的事情,使用classList:
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)
};
也许有一个更好的方法使用toggle,但是上面的方法在Chrome
您可以将"scroll"one_answers"scrollstop"事件组合在一起以达到期望的结果:
$(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: (注意这里我使用padding作为更大的nav来收缩不使用padding,你可以根据需要修改)
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更改为或多或少以满足您的需求)
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();
});
};
});
这将很好地完成工作,动画和酷的方式。
我使用这个代码为我的项目
$(window).scroll ( function() {
if ($(document).scrollTop() > 50) {
document.getElementById('your-div').style.height = '100px'; //For eg
} else {
document.getElementById('your-div').style.height = '150px';
}
}
);
可能会有帮助