Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.08.2018, 05:58
Новичок на форуме
Отправить личное сообщение для Tesessssss Посмотреть профиль Найти все сообщения от Tesessssss
 
Регистрация: 30.07.2010
Сообщений: 4

Добавить анимацию fadeIn при фиксации меню
Всех приветствую!
Помогите добавить в скрипт меню эффект fadeIn() при отображении меню и fadeOut() скрытия меню. Сам скрипт:
https://jsfiddle.net/Lkqf3dsb/
Суть была такая, что при if (win_scroll > 120) должен был быть эффект плавного появления меню после заданной высоты $(main_nav.fadeIn()) вниз, а если при скролле вверх приближаясь к меню, то срабатывал эффект $(main_nav.fadeOut())
Анимация появления меню после скролла вниз выходит изначально быстро, а нужно сделать плавное появление, и после того, как скролл доходит вверх до меню, плавающее меню должно плавно пропадать.
Помогите правильно сделать такую анимацию.
Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 11.08.2018, 07:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Tesessssss,
вариант ...
<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
 <style type="text/css">
 .primary-nav {
     position: relative;
     width: 96%;
     margin: 0 auto;
     background-color: #111;
     color: rgba(255,255,255,.87);
     text-align: center;
     z-index: 20;
 }

 .primary-nav .wrap {
     width: 100%;
 }

 .primary-nav.sticky-nav .wrap {
     width: 96%;
     max-width: 980px;
     margin: 0 auto;
 }

 .primary-nav ul.nav-menu, .primary-nav div.nav-menu > ul {
     position: relative;
     margin: 0 -2px;
     padding: 0;
     list-style: none;
     display: block;
     width: 100%;
     z-index: 9;
     font-size: 0;
 }

 .primary-nav ul {
     margin: 0;
     text-indent: 0;
 }
 .primary-nav li {
     display: inline-block;
     font-size: 13px;
     margin: 0;
     position: relative;
 }

 .nav-menu > li {
     margin: 0 2px;
 }

 .nav-menu > li > a {
     display: block;
     padding: 12px;
     color: rgba(255,255,255,.87);
     font-size: 13px;
     line-height: 1.846153846;
     letter-spacing: .25px;
     font-weight: 600;
     text-decoration: none;
     white-space: nowrap;
     -webkit-transition: .2s;
        -moz-transition: .2s;
          -o-transition: .2s;
             transition: .2s;
 }

 .inline-nav .nav-menu > li > a {
     color: #757575;
     text-transform: uppercase;
     font-weight: 400;
 }

 ul.nav-menu li a span {
     display: block;
     font-size: 12px;
 }

 .primary-nav li:hover > a {
     color: #fff;
     background-color: rgba(255, 255, 255, .1);
 }

 .sticky-nav {
     position: fixed;
     top: -120px;
     left: 0;
     right: 0;
     margin: 0 auto;
     width: 100%;
     z-index: 99;
     box-shadow: 0 1px 2px rgba(0,0,0,.2);
 }
 #main-nav {
     transition: top 1.8s;
 }

 .sticky-nav.fix {
     top: 0;
 }

 .top-nav.sticky-nav {
     z-index: 100;
 }
 body{
     height: 2000px;
 }

 </style>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script>
    jQuery(document).ready(function($) {
    var ss_custom = {
        "main_bar_sticky": "true"
    };

    function animateNav() {
        var win_scroll = $(window).scrollTop(),
            win_height = $(window).height(),
            main_nav = $('#main-nav'),
            main_nav_offset = '',
            scroll_by = 120;

        if (ss_custom && ss_custom.header_style == 'slim') {
            main_nav = $('.header-slim');
        }

        main_nav_offset = $(main_nav).outerHeight();

        if (ss_custom && ss_custom.main_bar_sticky && !ss_custom.top_bar_sticky) {
            if (win_scroll > scroll_by) {
                $(main_nav).addClass('sticky-nav');
                window.setTimeout(function() {
                    $(main_nav).addClass('fix');
                }, 0)

                $('.primary').css({
                    "margin-top": main_nav_offset
                });
                if (ss_custom && ss_custom.header_style == 'slim') {
                    $('.menu-drop').css({
                        'max-height': win_height - main_nav_offset
                    });
                } else {
                    $('.menu-drop').css({
                        'max-height': win_height - $('.menu-button').outerHeight()
                    });
                }
            } else {
                $(main_nav).removeClass('sticky-nav fix');
                $('.primary').css({
                    "margin-top": 0
                });
                $('.menu-drop').css({
                    'max-height': '100%'
                });
            }
        }
    }

    animateNav();
    $(window).on('load scroll', function() {
        animateNav();
    });

});
 </script>
</head>

<body>
 <br><br><br>
<nav id="main-nav" class="primary-nav" role="navigation">
<div class="wrap">
            <ul id="menu-menu-2" class="nav-menu clearfix">
            <li class="menu-item"><a href="">menu 1</a></li>
            <li class="menu-item"><a href="">menu 2</a></li>
            <li class="menu-item"><a href="">menu 3</a></li>
</ul>
</div></nav>

</body>

</html>
Ответить с цитированием
  #3 (permalink)  
Старый 12.08.2018, 19:31
Новичок на форуме
Отправить личное сообщение для Tesessssss Посмотреть профиль Найти все сообщения от Tesessssss
 
Регистрация: 30.07.2010
Сообщений: 4

Спасибо рони за помощь, доработал анимацию и сейчас как надо!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Убрать боковое меню при клике не по меню Oleg0 Элементы интерфейса 2 21.08.2017 20:07
Меню при нажатии(добавление класса. kostia170985 Общие вопросы Javascript 5 12.07.2017 15:07
Сворачивание меню при клике в любом месте страницы DmitriyLan Элементы интерфейса 4 30.05.2017 16:18
Несколько пунктов меню, отображение содержимого при клике chelfenix jQuery 3 10.04.2015 16:52
Выделение активного пункта меню при ajax запросе faecker AJAX и COMET 6 04.09.2014 19:14