Прочее

Небольшая оптимизация блога, скрипт фиксации меню

Статья о том, как можно оптимизировать код, который я уже описывал в статье о фиксированном меню.

Эта статья предназначена тем, кто уже читал статью Скрипт фиксации меню при прокрутке страницы и на практике освоил данные там примеры.

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

Основная идея этой статьи: Используй сменяемые классы. Меняй лишь один класс, ведь это лучше, чем менять кучу css свойств.

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

Для начала проведем анализ старого кода:

//режим отображения шапки var min = false;//изначально шапка в обычном режиме $(document).scroll(function() { if($(document).scrollTop()>30&&!min) { //изменение свойств шапки $(".line2, .line2_b").css('height','35px'); $(".line2").css('position','fixed'); $(".line2").css('top','0'); $(".line2").css('z-index','200'); $(".logo").css('margin-top','2px'); //уменьшение логотипа $(".logo").css('background-position','0px -50px'); $(".line2_b ul").css('margin-top','-87px'); min = true;//шапка в мини режиме } if($(document).scrollTop()<=30&&min) { //изменение свойств шапки $(".line2, .line2_b").css('height','80px'); $(".line2").css('position','relative'); $(".logo").css('margin-top','15px'); //увеличение логотипа $(".logo").css('background-position','0px 0px'); $(".line2_b ul").css('margin-top','-75px'); min = false;//шапка в обычном режиме } });

На самом деле вполне логичный код, он работает, но можно сделать его более быстрым, эффективным.

По логике выполнения, у нас есть два состояния шапки: 1)шапка маленькая; 2) шапка большая.Так что нам мешает создать два класса, которые будут описывать эти оба состояния?Я создал два класса: .header_min и .header_max, следующего содержания:

/*Маленькая шапка*/ .header_min{ position:fixed !important; top:0 !important; z-index:200 !important; height:35px !important; } .header_min .line2_b{ height:35px !important; } .header_min .line2_b .logo{ margin-top: 2px !important; background-position: 0px -50px !important; } .header_min .line2_b #line_menu{ margin-top: -87px !important; } /*Большая шапка*/ .header_max{ height:80px !important; position:relative !important; } .header_max .line2_b{ height:80px !important; } .header_max .line2_b .logo{ margin-top: 15px !important; background-position: 0px 0px !important; } .header_max .line2_b #line_menu{ margin-top: -75px !important; }

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

/*Шапка фиксируется*/ var min = false; $(document).scroll(function() { if($(document).scrollTop()>30&&!min) { /*Шапка маленькая*/ $(".line2").toggleClass("header_max header_min"); min = true; } if($(document).scrollTop()<=30&&min) { /*Шапка большая*/ $(".line2").toggleClass("header_max header_min"); min = false; } });

Такой скрипт выглядит намного изящнее, осталось вынести его в отдельный файл и готово.

Хоть я и люблю свой PHPStorm, но все же советую вам посмотреть еще одно видео Sorax о текстовом редакторе Sublime Text 2:

image

Евгений

Специалист по разработке систем на современных PHP фреймворках.