Добавление CSS3 перехода с плавающей панелью навигации - JQUERY

0

Я создал плавающий nav-bar используя jquery.

Он появляется мгновенно, когда я прокручиваю. Я не хочу, чтобы он появлялся мгновенно.

Я хочу, чтобы это выглядело smoothly.

Когда я прокручиваю вниз, панель навигации появляется мгновенно. Я хотел применить к нему переход css3 с помощью jquery. Но я не знаю, как это сделать.

Здесь FIDDLE.

Кто-нибудь, пожалуйста, помогите мне.

  • 0
    не ясно, какой переход вы хотите сделать
  • 0
    обновить вопрос.
Показать ещё 1 комментарий

3 ответа

0
Лучший ответ

Или это поведение, которое вы хотите, примерно так: 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;
        }
    });
0

Смотрите эту скрипку:

http://jsfiddle.net/FVfnL/3/

nav.css({
         position: 'static',
         height: '85px',
         top: '-100px',
         display: 'none',
       });
0

Когда вы прокручиваете, вы хотите добавить класс active в ваш nav-bar.

Затем в вашем CSS есть следующее:

.nav-bar { opacity: 0; transition: opacity 1s ease-in; }

nav-bar .active { opacity: 1; }

Ещё вопросы

Сообщество Overcoder
Наверх
Меню