“动画"在带有 Bootstrap 3 的导航栏中 [英] "Animation" in a navigation bar with Bootstrap 3

问题描述

下面是我的代码，我正在尝试重新创建这种效果:(http://hideo-html5-css3-bootstrap-website-template.little-neko.com/files/index.html) [当你向下滚动导航栏会变成一半大小和一些透明度或类似的东西.] 有什么想法可以重新制作它?

Below is my code and I'm trying to recreate this effect: (http://hideo-html5-css3-bootstrap-website-template.little-neko.com/files/index.html) [When you scroll down the navigaiton bar changes to half size and with some transparency or something like that.] Any ideas to remake it?

代码:http://pastebin.com/r0pS4AYD

Ps:我的代码没有什么特别的，我只是想要一个点/方向来实现它.

Ps: My code has nothing special and I just want a point/direction to make it.

推荐答案

当用户滚动到特定位置时，
或者当他开始滚动时，您可以通过 jQuery 添加一个类.

When the user scolls to an specific position,
or in your case when he begins to scroll, you can add an class via jQuery.

在此处查看更多信息:

滚动时将菜单栏固定在顶部

(代码取自链接中的帖子)

(Code is taken from the post in the link)

$(window).bind('scroll', function() {
     if ($(window).scrollTop() > 50) {
         $('.menu').addClass('fixed');
     }
     else {
         $('.menu').removeClass('fixed');
     }
});

当你用你的代码创建一个 fiddle 是最好的，这样其他人就可以轻松修改你的代码和看看那里发生了什么..

it is the best when you create an fiddle with your code, so other people can easy modify your code and see whats going on there..

这篇关于“动画"在带有 Bootstrap 3 的导航栏中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！