Я создал плавающий nav-bar
используя jquery
.
Он появляется мгновенно, когда я прокручиваю. Я не хочу, чтобы он появлялся мгновенно.
Я хочу, чтобы это выглядело smoothly
.
Когда я прокручиваю вниз, панель навигации появляется мгновенно. Я хотел применить к нему переход css3 с помощью jquery. Но я не знаю, как это сделать.
Здесь FIDDLE.
Кто-нибудь, пожалуйста, помогите мне.
Или это поведение, которое вы хотите, примерно так: 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;
}
});
Смотрите эту скрипку:
nav.css({
position: 'static',
height: '85px',
top: '-100px',
display: 'none',
});
Когда вы прокручиваете, вы хотите добавить класс active
в ваш nav-bar.
Затем в вашем CSS есть следующее:
.nav-bar { opacity: 0; transition: opacity 1s ease-in; }
nav-bar .active { opacity: 1; }