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

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

 Для того, что бы закрепить меню Web-страницы на экране браузера можно воспользоваться стандартной библиотекой jQuery и модулем stiky и добавляем CSS класс в ото место страницы, где находится меню.

Как это сделать:

1. Скачайте по ссылке архив с рабочим примером и распакуйте его. 
2. Скрпируйте папку JS в корневую папку вашего сайта.
3. В разделе HEAD вашей Web-страницы вставьте код подключения библиотеки jQuery и нужного модуля:

   <script src="/js/jquery-1.8.3.js" type="text/javascript"></script>
    <script src="/js/jquery.sticky.js" type="text/javascript"></script>

4. В этом же разделе вставьте скрипт следующего содержания:

   <script type="text/javascript">
       $(window).load(function(){
           $(".navigation").sticky({ topSpacing: 0, center:true, className:"hey" });
       });
    </script>

   Параметр topSpacing в третьей строке скрипта определяет отступ удерживаемого меню от верхней границы экрана. В данном случае он = 0, т.е. всегда должен оставаться у самого края страницы.

5. При необходимости измените параметры скрипта, сохраните страницу и проверте рабту.

Добавить комментарий: