Навигационная панель с возможностью прокрутки страницы

В этом уроке мы сделаем удобное меню, которое предоставит нам возможность прокрутки страницы и будет следовать за нами по странице по мере прокрутки.

Каждый день в интернете мы что-нибудь делаем, но кое-что мы делаем всегда — прокручиваем страницы. При чтении блога, просмотре товаров и т.п. нам всегда необходимо вернуться к функциям сайта, которые остались вне видимости. Наше навигационное меню — удобное решение этой проблемы.

Как это работает?

Когда посетитель заходит на сайт — он видит обычное меню в шапке сайта. Но, когда он начинает прокручивать страницу, меню отделяется и начинает следовать за ним. Если пользователь вернулся обратно вверх, меню занимает свое обычное место. Это удобное меню поможет посетителям сэкономить их время.

HTML

Наше меню будет состоять из двух основных элементов: jQuery будет управлять поведением меню в зависимости от положения и CSS, с помощью которого мы сделаем кнопки меню. HTML разметка:

<div id="floatingbar">
    <ul>
        <li><img border="0" alt="" src="images/rocketbar.png"></li>
        <li><a href="http://www.addyosmani.com"><button>Home</button></a></li>
        <li><a href=""><button>About</button></a></li>
        <li><a href=""><button>Services</button></a></li>
        <li><a href=""><button>Pricing</button></a></li>
        <li><a href=""><button>Blog</button></a></li>
        <li><a href=""><button>Contact</button></a></li>
        <li><a href="javascript:#"><button title="Scroll" id="dirbutton"><img border="0" alt="" src="images/bottomarrow.png"></button></a></li>
    </ul>
</div>

JavaScript

Мы будем использовать функцию $(window).scroll() для выполнения необходимых действий, когда посетитель передвигается по странице. Когда пользователь внизу страницы — стрелка будет направлена вверх или, в противном случае — вниз

var $top1= $('#floatingbar').offset().top + 20;
var $mid1 =  Math.floor($(window).height() / 2);
$(window).scroll(function()
{
        if ($(window).scrollTop()>$top1)
        {
         $('#floatingbar').addClass('floater');
        }
        else
        {
         $('#floatingbar').removeClass('floater');
         }
         if($(window).scrollTop() > $mid1)
          {
             $('#dirbutton').
                                   find('img').
                                   attr('src','images/toparrow.png');
             $('#dirbutton').data('mode','scrolldown');
             $('#dirbutton').show();
          }else
          {
             $('#dirbutton').
                                        find('img').
                                        attr('src','images/bottomarrow.png');
             $('#dirbutton').data('mode','scrollup');
          }
});

Для анимированной прокрутки используем следующий код:

$.preloadImages = function()
{
       for(var i = 0; i").attr("src", arguments[i]);
       }
}
$.preloadImages("images/toparrow.png","images/bottomarrow.png");
$('#dirbutton').click(function()
{
   $mode = $(this).data('mode');
   switch($mode)
   {
     case 'scrolldown':
         $('html, body').animate({scrollTop:0}, 'slow');
         return false;
         break;
     case 'scrollup':
        $scrollpos = $('body').outerHeight();
        $('html, body').animate({scrollTop:$scrollpos}, 'slow');
        return false;
        break;
   }
});

CSS кнопки

Css код стиля для наших кнопок:

button {
    position: relative;
    margin: 0 .5em .5em .5em;
    padding: 0.5em 1.5em;
    font-size: 14px;
    font-weight: bold;
    font-family:Arial;
    color: #4f4f4f;
    text-shadow: 0 1px 1px #fff;
    background: #ddd;
    background: -webkit-gradient(linear, left top, left bottombottom, from(#ededed), to(#c4c4c4));
    background: -moz-linear-gradient(top, #ededed, #c4c4c4);
    border: 1px solid #acacac;
    border-top-color: #bdbdbd;
    letter-spacing:-1px;
    border-bottom-color: #949494;
    border-radius: .214em;
    -webkit-border-radius: .214em;
    -moz-border-radius: .214em;
    transition: all .2s ease-in-out;
    -webkit-transition: all .2s ease-in-out;
    -moz-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    box-shadow: inset 0 1px 0 #fff;
        -webkit-box-shadow: inset 0 1px 0 #fff;
        -moz-box-shadow: inset 0 1px 0 #fff;
        -o-box-shadow: inset 0 1px 0 #fff;
    cursor: pointer;
    }
    button:hover,
    button:focus {
        box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
            -webkit-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
            -moz-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
            -o-box-shadow: 0 0 7px rgba(0,0,0,0.4), inset 0 1px 0 #fff;
        }
    button:active {
        background: #ccc;
        background: -webkit-gradient(linear, left top, left bottombottom, from(#c3c3c3), to(#ebebeb));
        background: -moz-linear-gradient(top, #c3c3c3, #ebebeb);
        border-color: #a6a6a6;
        border-top-color: #939393;
        border-bottom-color: #bcbcbc;
        box-shadow: inset 0 -1px 0 #fff;
            -webkit-box-shadow: inset 0 -1px 0 #fff;
            -moz-box-shadow: inset 0 -1px 0 #fff;
            -o-box-shadow: inset 0 -1px 0 #fff;
        }

Если вам нужна обычная кнопка для прокрутки страницы смотрите урок Кнопка для прокрутки страницы вверх. На этом все, не пропустите новые уроки! 🙂