[英]Adding CSS3 Transition Floating Nav Bar - JQUERY
I've created a floating nav-bar
using jquery
. 我已经使用
jquery
创建了一个浮动的nav-bar
。
It appers instantly when i scroll. 当我滚动时,它立即出现。 I don't want it to appear instantly.
我不希望它立即出现。
I want to make it appear smoothly
. 我想使它看起来
smoothly
。
When i scroll down the navigation bar appears instantly. 当我向下滚动时,导航栏会立即出现。 I wanted to apply css3 transition to it using jquery.
我想使用jQuery将css3转换应用于它。 But i don't have a clue on how do it.
但是我不知道怎么做。
Here's the FIDDLE . 这是FIDDLE 。
Some one please help me. 有人请帮助我。
When you scroll you want to add a class of active
to your nav-bar. 滚动时,要向导航栏添加
active
类别。
Then, in your CSS have the following: 然后,在您的CSS中具有以下内容:
.nav-bar { opacity: 0; transition: opacity 1s ease-in; }
nav-bar .active { opacity: 1; }
See this fiddle: 看到这个小提琴:
http://jsfiddle.net/FVfnL/3/ http://jsfiddle.net/FVfnL/3/
nav.css({
position: 'static',
height: '85px',
top: '-100px',
display: 'none',
});
Or is the behavior you want, something like this: http://jsfiddle.net/FVfnL/4/ 还是您想要的行为,就像这样: http : //jsfiddle.net/FVfnL/4/
var nav = $('.main-nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $('.scrollbar');
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
left: '15px',
transition: 'position,top 1.5s ease 0.1s',
width: nav.width()
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
top: navHomeY,
transition: 'position,top 1.5s ease 0.1s',
});
isFixed = false;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.