Добавить анимацию fadeIn при фиксации меню
Всех приветствую!
Помогите добавить в скрипт меню эффект fadeIn() при отображении меню и fadeOut() скрытия меню. Сам скрипт: https://jsfiddle.net/Lkqf3dsb/ Суть была такая, что при if (win_scroll > 120) должен был быть эффект плавного появления меню после заданной высоты $(main_nav.fadeIn()) вниз, а если при скролле вверх приближаясь к меню, то срабатывал эффект $(main_nav.fadeOut()) Анимация появления меню после скролла вниз выходит изначально быстро, а нужно сделать плавное появление, и после того, как скролл доходит вверх до меню, плавающее меню должно плавно пропадать. Помогите правильно сделать такую анимацию. Заранее спасибо! |
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> |
Спасибо рони за помощь, доработал анимацию и сейчас как надо!
|
Часовой пояс GMT +3, время: 05:54. |