РЭДЛАЙН
Лучшие решения для Вас и Вашего бизнеса!
На нашем сайте вы можете получить информацию о веб-разработке, обслуживании и продвижении сайта. Интернет-маркетинге. SEO (поисковой оптимизации). Контекстной и медийной рекламе в Интернете. SMM. Регистрации доменов и хостинговых услугах. И современном дизайне сайтов. Вообщем того что касается веб-разработки, а также много другой полезной информации из мира интернета, бизнеса и интернет-технологий...
Создаем доступные и современные сайты, которые работают! Обслуживаем и эффективно продвигаем интернет-проекты с 2006 года!
Главная Web-мастеру Фиксированная навигация с использованием плагина jQuery Waypoints


Фиксированная навигация с использованием плагина jQuery Waypoints

В данном уроке мы сделаем навигационную панель, которая остается на своем месте при прокрутке содержания страницы. И, конечно же, применим пару хитростей для улучшения внешнего вида и функционала.

 

Введение

Ленты являются достаточно популярным элементом веб дизайна. Их достаточно часто можно встретить в варианте с треугольными концами. Ленты ненавязчиво разрывают плоскую парадигму дизайна на отдельные блоки. В данном уроке мы продемонстрируем альтернативный способ для формирования внешнего вида лент, который придает им более элегантный вид в отличие от обычных треугольных концов.

В данном уроке мы будем использовать элемент HTML5 nav в качестве контейнера для горизонтально списка ссылок. А также опишем, как сделать его более приятным для глаз с помощью CSS.

Но что более важно, мы представим плагин jQuery Waypoints, который обеспечивает дополнительный функционал: по мере прокрутки содержания вниз навигационная лента остается наверху окна просмотра и изменяется индикация текущего раздела. Также мы будем использовать другой плагин, ScrollTo, для обеспечения плавной прокрутки и удобного позиционирования при нажатии пользователем на навигационных ссылках.

 

Шаг 1. Контейнер для навигации

Несомненно, что вы уже знакомы с большим набором новых элементов введенных HTML5. В данном примере мы используем два из них: : <nav> и <section>. начнем со следующей разметки:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/styles.css" />
  </head>
  <body>
    <div class=wrapper>
      <h1>Большой заголовок.</h1>
      <nav><!-- Навигация. --></nav>
      <section id="section-1">Текст раздела ...</section>
    </div>
    <!-- Скрипты будут располагаться здесь. -->
  </body>
</html>

Мы будем использовать явное определение ширины для навигационной панели. Она будет на 28px шире контейнера содержания, а ее положение ее выступов обеспечиваются отрицательным левым полем. Также обеспечим слегка закругленные углы верхней грани с помощью  border-*-radius и небольшой произвольно определенный отступ.

nav {
  position: relative;
  width: 928px;
  padding: 2em;
  margin-left: -14px;
  border-top-left-radius: 14px 7px;
  border-top-right-radius: 14px 7px;
}

Затем мы добавляем неупорядоченный список ссылок в панель навигации и устанавливаем для его пунктов свойство display: inline-block, чтобы выводить их в одну линию. Нам не нужны никакие метки списка, поэтому добавим свойство list-style: none.

<nav>
  <ul>
    <li><a class=nav-link href=#section-1>Section 1</a></li>
    <li><a class=nav-link href=#section-2>Section 2</a></li>
    ...И другие пункты списка...
  </ul>
</nav>
nav li {
  display: inline-block;
  list-style: none;
}

На данный момент наша панель будет выглядеть примерно так:

 

Шаг 2. Закругленные концы ленты

Теперь, если бы CSS допускал возможность иметь множество псевдо элементов (например, ::after::after), мы бы могли сделать скругленные концы навигационной панели семантически правильным способом. Но, нам придется использовать два выпадающих из семантики элемента div в конце nav. Определим для них классы nav-left и nav-right. Они имеют 14px ширины и 14px высоты, позиционируются абсолютно в 14px от низа nav.

Семейство свойств border-radius может принимать 2 значения для каждого угла. Также можно использовать проценты для установки ширины, что является достаточно удобным методом - позволяет автоматически адаптировать радиус закругления к изменениям размеров прямоугольника.

Небольшие “тени”, которые завершают создание внешнего вида панели, созданы с помощью псевдо-элементов  ::after. Их  высота и ширина, также как и радиус закругления рамки устанавливаются в процентах.

/* поменяйте ‘left’ на ‘right’ для другого конца навигационной ленты */
.nav-left {
  position: absolute;
  left: 0;  bottom: -14px;
  width: 14px;  height: 14px;
  background: #848a6a;
  border-bottom-left-radius: 100% 50%;
}
.nav-left::after {
  content: '';
  position: absolute;
  right: 0;
  width: 66%;  height: 66%;
  background: #000;
  border-top-left-radius: 100% 50%;
  border-bottom-left-radius: 100% 50%;
}

Теперь панель навигации будет выглядеть так:

 

Шаг 3. Скрипт

Для достижения эффекта плавающего блока мы дуем использовать плагин jQuery Waypoints (автор Caleb Troughton). Его единственным назначением является запуск событий при прокручивании пользователем до определенных элементов. Он очень простой в использовании, но предлагает достаточно большой набор возможностей (смотрите примеры на его домашней странице).

Включаем jQuery и Waypoints в код страницы.

Первое, что нужно сделать, зарегистрировать точку с помощью метода  .waypoint()для элемента. Конечно, ничего не происходит - нужно определить функцию для обработки события. Самый простой способ определения функции -передача параметров функции .waypoint().

Вы можете попробовать плагин в действии: добавить следующий код в скрипт и понаблюдать за сообщением, которое будет всплывать по мере прокручивания панели навигации.

$(function() {                     // После загрузки страницы
  $('nav').waypoint(               // Создаем точку
    function() {
      alert("Mjxrf достигнута.");
    }
  )
});

Теперь, чтобы получить желаемый эффект, нужно усложнить процесс. Сначала заключим нашу навигационную панель в контейнер, который будет точкой и служит как удобное место размещения (смотри код ниже).

<div class="nav-container">
  <nav>
    ...
  </nav>
</div>

В CSS создаем следующее правило.

.sticky {
  position: fixed;
  top: 0;
}

И изменяем скрипт следующим образом:

$(function() {
  var nav_container = $(".nav-container");
  var nav = $("nav");
  nav_container.waypoint({
    handler: function(event, direction) {
        nav.toggleClass('sticky', direction=='down');
    }
  });
});

Вы вполне правомочны задать вопрос: "Что здесь происходит?". Вероятно вы догадались, что мы привязываем точку к контейнеру nav-container, но в этот раз мы пользуемся другим способом. Вместо непосредственной передачи функции обработчика методу .waypoint() мы инкапсулируем её в объект. Большой разницы для функционирования нет. Объект, который мы передаем, может содержать несколько других опций, что сделает его достаточно удобным для использования в дальнейшем.

Функция обработчик, которую мы определили, принимает два параметра. Первый - стандартный объект jQuery event, который нам не интересен. Второй - специфичный для плагина Waypoints, является строкой ‘down’ или ‘up’, в зависимости от направления прокручивания, которым достигается точка.

Знания о направлении прокрутки является важной информацией, которая позволяет определять различное поведение. В теле обработчика мы используем сравнительно малоизвестный вариант метода jQuery .toggleClass(): второй параметр определяет условия для добавления или удаления класса. Когда пользователь прокручивает страницу вниз, выражение direction===’down’ будет иметь значение true, и наше навигационная панель получит класс sticky, который зафиксирует её наверху окна просмотра. Как только пользователь прокрутит страницу обратно, класс удалится, и навигационная панель станет на свое место.

Круто? Однако, если вы медленно прокрутите страницу вниз за точку, которая только что создана, то сможете заметить "прыжок" содержания, вызванный удалением панели навигации из потока документа. Кроме подпорченного внешнего вида, такое поведение может привести непонятным ошибкам при выводе содержания страницы. К счастью, такую ошибку легко исправить - добавляем следующий код в функцию обработки, и прыжка не будет.

if (direction == 'down')
  nav_container.css({ 'height':nav.outerHeight() });
else
  nav_container.css({ 'height':'auto' });

Решение вполне очевидно: мы используем nav-container как заполнитель места. Когда происходит прокрутка вниз мы увеличиваем высоту и содержание, расположенное ниже, остается на месте. Чтобы метод работал, нужно любые вертикальные поля, которые могут потребоваться для панели навигации должны использоваться для элемента nav-container, а не для элемента nav.

 

Шаг 4. Вертикальное смещение

Если вы задумывались над процессом, то существует множество случаев, когда запуск события при точном достижении элементом границы окна просмотра, является нежелательным. Плагин Waypoints обеспечивает удобную опцию для решения задачи:  offset. Например:

nav.waypoint( {
  handler: …,
  offset: 50
} )

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

Значение опции может быть число (представляет фиксированное число пикселей), строкой, содержащей проценты (интерпретируется как процент от высоты окна просмотра), или функцией, которая возвращает количество пикселей. Последнее значение может обеспечить существенную гибкость использования. Мы воспользуемся ей позже, а пока установим фиксированное значение для просмотра возможностей.

Первое, что надо учесть - дополнительное пространство над фиксированным элементом. Использование переменной offset облегчает решение: для смещения в 15px добавляем  offset:15px к опциям метода .waypoint() и меняем top:0px на top:15px в правилах класса .sticky.

Небольшой градиент над панелью навигации может улучшить дизайн. Добавить его легко с помощью дополнительного элемента div в элемент nav и кода CSS для него:

.sticky .nav-above {
  position: absolute;
  top:-15px;
  left:1em;
  right:1em;
  height:15px;
  background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  /* добавляем градиент, если нужно */
}


 

Шаг 5. Функция смещения

Одна из замечательных возможностей плагина - динамическое определение смещения точки:

nav.waypoint( {
  handler: …,
  offset: function() {
    return —(nav.outerHeight()+50);
  }
} )

В данном примере обработчик будет запускаться в момент, когда пользователь уже прокрутил страницу на 50px ниже нижней границы элемента (знать высоту элемента не нужно).

Примечание: такие генерируемые смещения (также, как и заданные в процентах) будут вычисляться каждый раз при изменении размеров окна., добавления новых точек или модификации опций точек. Если вы выполняете операции, оказывающие влияние на позиционирование точек (такие как изменение шаблона DOM или страницы) нужно вызывать $.waypoints('refresh') для пересчета позиций.

В контексте нашего урока мы используем данный функционал для плавного выскальзывания навигационной панели сверху:

var top_spacing = 15;
var waypoint_offset = 50;
nav_container.waypoint({
  handler: function(event, direction) {
    if (direction == 'down') {
      nav_container.css({ 'height' : nav.outerHeight() });
      nav.addClass("sticky")
         .stop()
         .css("top", -nav.outerHeight())
         .animate({"top" : top_spacing});
    } else {
      nav_container.css({ 'height' : 'auto' });
      nav.removeClass("sticky")
         .stop()
         .css("top", nav.outerHeight() + waypoint_offset)
         .animate({"top" : ""});
    }
  },
  offset: function() {
    return &mdash;(nav.outerHeight() + waypoint_offset);
  }
});

Здесь стандартные операции jQuery: добавление или удаление класса sticky к элементу nav, изменяем вертикальное позиционирование с помощью метода .css(), и затем выполняем .animate(). Метод .stop() служит для предотвращения возможных ошибок, очищая очередь событий jQuery.

 

Шаг 6. Выделение и плавная прокрутка

Очень полезным может оказаться выделение пунктов, соответствующих текущему положению на странице. С помощью плагина Waypoints задача легко решается. Нужно добавить в скрипт следующие строки:

$(function() {
  …
  // Копируем отсюда…
  var sections = $('section');
  var navigation_links = $('nav a');
  sections.waypoint({
    handler: function(event, direction) {
      // код обработчика
    },
    offset: '35%'
  });
  // …до сюда
});

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

Код, который мы используем в обработчике достаточно очевиден:

var active_section;
active_section = $(this);
if (direction === "up") active_section = active_section.prev();
var active_link = $('nav a[href="#' + active_section.attr("id") + '"]');
navigation_links.removeClass("selected");
active_link.addClass("selected");

Нам нужно знать, какая секция выводится. Если происходит прокрутка вниз, то секция, которой принадлежит точка, становится активной. При прокручивании наверх в окно просмотра попадает предыдущая секция, поэтому мы используем .prev() для ее выделения. Затем удаляем класс selected со всех ссылок панели навигации перед тем, как установить его для одной ссылки, чей атрибут href соответствует id текущей активной секции.

Нажатие на ссылке в панели навигации помещает верх секции наверх окна просмотра. В данном случае нам помогает плагин ScrollTo. Нужно добавить следующий код:

navigation_links.click( function(event) {
  $.scrollTo(
    $(this).attr("href"),
    {
      duration: 200,
      offset: { 'left':0, 'top':-0.15*$(window).height() }
    }
  );
});

Хотя есть лучшие способы привязки события click, мы используем простейший: .click(). Метод .scrollTo() вызывается также, как и .waypoint(). Он принимает два параметра: цель прокрутки и объект с опциями. Атрибут href нажатой ссылки работает как цель, а выражение используется для установки смещения на 15% от высоты окна просмотра.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/b-eq25GfuuY/lessons.php

Фиксированная навигация с использованием плагина jQuery Waypoints | | 2013-02-02 02:40:30 | | Статьи Web-мастеру | | В данном уроке мы сделаем навигационную панель, которая остается на своем месте при прокрутке содержания страницы. И, конечно же, применим пару хитростей для улучшения внешнего вида и функционала | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Дайджест новых статей по интернет-маркетингу на ваш email
Подписаться

Продающие сайты "под ключ"!

Наши сайты зарабытывают вам деньги. Landing-page. Эффективные продающие сайты точно в срок и под ключ! Всего от 14700 рублей
Подробнее...

Интернет-магазины и каталоги "под ключ"!

Эффективные и удобные инструменты торговли (электронной торговли) "под ключ". Продают, даже когда вы спите! Всего от 33800 рублей
Подробнее...

Комплексный интернет-маркетинг и продвижение сайтов

Максимальную эффективность дает не какой-то конкретный метод, а их комбинация. Комбинация таких методов и называется комплексным интернет-маркетингом. Всего от 8000 рублей в месяц
Подробнее...

Реклама в Yandex и Google

Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров. Всего от 8000 рублей в месяц
Подробнее...

Social media marketing (SMM) — продвижение в социальных медиа

Реклама в Однокласcниках и на Mail.ru Создание, ведение и раскрутка групп и реклама ВКонтакте и Facebook. Всего от 8000 рублей в месяц
Подробнее...

Приглашаем к сотрудничеству рекламные агентства и веб-студии!

Внимание Акция! Приглашаем к сотрудничеству рекламные агентства и различные веб-студии России! Индивидуальные и взаимовыгодные условия сотрудничества.
Подробнее...

Ускоренная разработка любого сайта от 5 дней!

Внимание Акция! Ускоренная разработка любого сайта! Ваш сайт будет готов за 5-10 дней. Вы можете заказать разработку любого сайта "под ключ" за 5-10 рабочих дней, с доплатой всего 30% от его стоимости!
Подробнее...

Ждем новых друзей!

Внимание Акция! Ждем новых друзей! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта при переходе к нам от другого разработчика.
Подробнее...

Приведи друга и получи скидку!

Внимание Акция! Приведи друга и получи скидку! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта, если клиент заказавший наши услуги, пришел по Вашей рекомендации.
Подробнее...

1 2 3 4 5 6 7 8 9

Новые статьи и публикации



Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!

Качественное и объемное представление своего бизнеса в Сети требуется любой растущей коммерческой структуре, стремящейся увеличить продажи, именно по этой причине среди наших клиентов как крупные так и небольшие компании во многих городах России и ближнего зарубежья.
Как мы работаем

Заявка
Позвоните или оставьте заявку на сайте.


Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!


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


Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.


Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.

Остались еще вопросы? Просто позвоните и задайте их специалистам
с 2:30 до 11:30 по Мск, звонок бесплатный
Или напишите нам в WhatsApp
с 9:30 до 18:30 по Хабаровску
Или напишите нам в WhatsApp
Веб-студия и агентство комплексного интернет-маркетинга «РЭДЛАЙН» © 2006 - 2024

Профессиональная Веб-разработка. Создание сайтов и магазинов "под ключ" , а также по всей России и зарубежью. Продвижение и реклама. Веб-дизайн. Приложения. Сопровождение. Модернизация. Интеграции. Консалтинг. Продвижение и реклама. Комплексный Интернет-маркетинг.

Оставьте заявку / Задайте вопрос

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услугу

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Обратный звонок

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Подписка на дайджест новостей

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услуги со скидкой \ Бесплатная консультация







КАКИЕ УСЛУГИ ВАС ИНТЕРЕСУЮТ?

КАКИЕ ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ ПОТРЕБУЮТСЯ?

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Высококачественные сайты по доступным ценамМы создаем практически любые сайты от продающих страниц до сложных, высоконагруженных и нестандартных веб приложений! Наши сайты это надежные маркетинговые инструменты для успеха Вашего бизнеса и увеличения вашей прибыли! Мы делаем красивые и максимально эффектные сайты по доступным ценам уже много лет!

Что нужно сделать, чтобы заказать создание сайта у нас?

Ну для начала вам нужно представлять (хотя бы в общих чертах), что вы хотите получить от сайта и возможно каким вы хотите его видеть. А дальше все просто. Позвоните нам или оставьте заявку нашим менеджерам, чтобы они связались с Вами, проконсультировали и помогли определиться с подходящим именно Вам сайтом по цене, сроку, дизайну или функционалу. Если вы все ещё не уверены, какой сайт вам нужен, просто обратитесь к нам! Мы вместе проанализируем вашу ситуацию и определим максимально эффективный для вас вариант.

Быстрый заказ \ Консультация

Для всех тарифных планов на создание и размещение сайтов включено:

Комплексная раскрутка сайтов и продвижение сайта Комплексный подход это не просто продвижение сайта, это целый комплекс мероприятий, который определяется целями и задачами поставленными перед сайтом и организацией, которая за этим стоит. Время однобоких методов в продвижении сайтов уже прошло, конкуренция слишком высока, чтобы была возможность расслабиться и получать \ удерживать клиентов из Интернета, просто сделав сайт и не занимаясь им...

Комплексная раскрутка работает в рамках стратегии развития вашего бизнеса в сети и направлена

Быстрый заказ \ Консультация

ЭФФЕКТИВНОЕ СОПРОВОЖДЕНИЕ (ПОДДЕРЖКА, ОБСЛУЖИВАНИЕ) САЙТОВ

Полный комплекс услуг по сопровождению сайтаМы оказываем полный комплекс услуг по сопровождению сайта: информационному и техническому обслуживанию и развитию Интернет сайтов.

Передав свой сайт для поддержки в руки наших специалистов, Вы избавитесь от проблем, связанных с обновлением информации и контролем за работой ресурса.

Наша компания осуществляет техническую и информационную поддержку уже имеющихся сайтов. В понятие «поддержка сайтов» также входят услуги администрирования сайтов, обновления сайтов и их модернизация.

Быстрый заказ \ Консультация

Редизайн сайта и Адаптивный веб дизайн

Современный, технологичный, кроссбраузерный ... Профессиональный дизайн сайтов и веб-приложений

Редизайн сайта — создание нового дизайна сайта с целью улучшения внешнего вида, функциональности и удобства использования. Редизайн сайта – это способ преобразовать проект к извлечению из него максимальной отдачи и средств. В современном мире задачами редизайна является поднятие существующего сайта на новый уровень для внедрения новых технологий, при этом сохраняя многолетний сформировавшийся опыт и успешные решения компаний.

Адаптивный дизайн сайтов и веб-приложений

Все больше людей пользуются мобильными устройствами (телефонами, планшетами и прочими) для посещения Интернета, это не для кого уже не новость. Количество таких людей в процентном отношении будет только больше с каждым годом, потому что это удобно и по многим другим причинам.

На сегодняшний день адаптивный дизайн является стандартным подходом при разработке новых сайтов (или веб-приложений) и в идеале ваш сайт должен смотреться и функционировать так, как вы задумывали, на всём разнообразии устройств.

Быстрый заказ \ Консультация

Контекстная реклама в Яндекс и GoogleКонтекстная реклама - это эффективный инструмент в интернет маркетинге, целью которого является увеличение продаж. Главный плюс контекстной рекламы заключается в том, что она работает избирательно.

Реклама в поисковых системах Яндекс и Google. Профессиональная настройка рекламы и отслеживание эффективности!

Рекламные объявления показываются именно тем пользователям, которые ищут информацию о Ваших товарах или услугах, поэтому такая реклама не является навязчивой и раздражающей в отличие от других видов рекламы, с которыми мы сталкиваемся на телевидении или радио. Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров.

Быстрый заказ \ Консультация

Скидка

1500 руб.
Заинтересовались услугами создания, обслуживания или продвижения вашей компании в Интернете?!
Получите 1500 руб.
за он-лайн заявку
Предложение ограничено.

После получения заявки с Вами свяжутся наши специалисты и уточнят все детали по интересующей вас услуге.
«Нажимая на кнопку "Получить скидку", я даю согласие на обработку персональных данных»
×
Получите 1500 рублей!
×
×