Temiks

Анимация фиксированного меню

Recommended Posts

Здравствуйте.
У меня есть два фиксированных меню.
У первого высота 150рх и видно оно сразу на странице, а когда пользователь прокручивает страницу меню уменьшается до 60рх.
Мне нужно  сделать так, что бы маленькое меню выезжало с верху страницы.

Примерно как на этом видео:


Если есть готовый скрипт, буду благодарен.

 

upd. Задача немного изменилась, нужен эффект fade in , fade out

Edited by Temiks

Share this post


Link to post
Share on other sites
  $(function () {    function animateMnu(numb, cls) {       var wnd = $(window),           $fix = $('.fix'),           numb = numb || 200,           cls = cls || 'fixed';            wnd.scroll(function () {              var ths = $(this).scrollTop();              function state() {                return (ths > numb) ? true : false;              }              function anim() {                $('.'+cls).animate({                  'top' : 0                }, 800)              }              if (state() && !$fix.hasClass(cls)) {                $fix.addClass(cls);                setTimeout(anim, 400);              }              else if (!state() && $fix.hasClass(cls)) {                $fix.removeClass(cls).removeAttr('style').stop();              }          });      }      animateMnu();     });
<div class="header fix"></div>
.fix {  width: 100%;  height: 150px;  background: #ccc;}.fixed {  position: fixed;  background: orange;  width: 100%;  height: 60px;  top: -60px;  left: 0;}

Разбирайтесь)

Share this post


Link to post
Share on other sites
Разбирайтесь)
 

Спасибо. Только заказчик уже передумал и хочет эффекты fade in, fade out. Я так понял, для этого нужно клонировать меню?

Share this post


Link to post
Share on other sites
Но есть проблема, я дублировал шапку в html, можно ли сделать как то иначе на жс?

Ага, добавлять класс с нужной высотой, как  в моем коде. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Member Statistics

    46,330
    Total Members
    3,128
    Most Online
    TimofejUS
    Newest Member
    TimofejUS
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.