Прочее

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

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

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

Так вот, после небольших экспериментов, раздумий, советов друзей, предлагаю вам оптимизировать код фиксации меню. Вместе с вами сейчас будем оптимизировать скрипт фиксации меню на этом самом блоге 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:

{"time":1561233252476,"blocks":[{"type":"paragraph","data":{"text":"Статья о том, как можно оптимизировать код, который я уже описывал в статье о фиксированном меню."}},{"type":"paragraph","data":{"text":"Эта статья предназначена тем, кто уже читал статью Скрипт фиксации меню при прокрутке страницы и на практике освоил данные там примеры."}},{"type":"paragraph","data":{"text":"Так вот, после небольших экспериментов, раздумий, советов друзей, предлагаю вам оптимизировать код фиксации меню. Вместе с вами сейчас будем оптимизировать скрипт фиксации меню на этом самом блоге Catine."}},{"type":"paragraph","data":{"text":"Основная идея этой статьи: Используй сменяемые классы. Меняй лишь один класс, ведь это лучше, чем менять кучу css свойств."}},{"type":"paragraph","data":{"text":"И это вполне логичная идея, которую будем сейчас воплощать в жизнь."}},{"type":"paragraph","data":{"text":"Для начала проведем анализ старого кода:"}},{"type":"code","data":{"code":"//режим отображения шапки\nvar min = false;//изначально шапка в обычном режиме\n$(document).scroll(function() {\n if($(document).scrollTop()>30&&!min)\n {\n //изменение свойств шапки\n $(\".line2, .line2_b\").css('height','35px');\n $(\".line2\").css('position','fixed');\n $(\".line2\").css('top','0');\n $(\".line2\").css('z-index','200');\n $(\".logo\").css('margin-top','2px');\n //уменьшение логотипа\n $(\".logo\").css('background-position','0px -50px');\n $(\".line2_b ul\").css('margin-top','-87px');\n min = true;//шапка в мини режиме\n }\n if($(document).scrollTop()<=30&&min)\n {\n //изменение свойств шапки\n $(\".line2, .line2_b\").css('height','80px');\n $(\".line2\").css('position','relative');\n $(\".logo\").css('margin-top','15px');\n //увеличение логотипа\n $(\".logo\").css('background-position','0px 0px');\n $(\".line2_b ul\").css('margin-top','-75px');\n min = false;//шапка в обычном режиме\n }\n});"}},{"type":"paragraph","data":{"text":"На самом деле вполне логичный код, он работает, но можно сделать его более быстрым, эффективным."}},{"type":"paragraph","data":{"text":"По логике выполнения, у нас есть два состояния шапки: 1)шапка маленькая; 2) шапка большая.Так что нам мешает создать два класса, которые будут описывать эти оба состояния?Я создал два класса: .header_min и .header_max, следующего содержания:"}},{"type":"code","data":{"code":"/*Маленькая шапка*/\n.header_min{\n\tposition:fixed !important;\n\ttop:0 !important;\n\tz-index:200 !important;\n\theight:35px !important;\n} \n.header_min .line2_b{\n\theight:35px !important;\n}\n.header_min .line2_b .logo{\n\tmargin-top: 2px !important;\n\tbackground-position: 0px -50px !important;\n}\n.header_min .line2_b #line_menu{\n\tmargin-top: -87px !important;\n}\n/*Большая шапка*/\n.header_max{\n\theight:80px !important;\n\tposition:relative !important;\n} \n.header_max .line2_b{\n\theight:80px !important;\n}\n.header_max .line2_b .logo{\n\tmargin-top: 15px !important;\n\tbackground-position: 0px 0px !important;\n}\n.header_max .line2_b #line_menu{\n\tmargin-top: -75px !important;\n}"}},{"type":"paragraph","data":{"text":"Теперь, если задать шапке один из этих классов, то она станет большой, либо маленькой. Таким образом, скрипт фиксации меню при прокручивании страницы мышкой выглядит так:"}},{"type":"code","data":{"code":"/*Шапка фиксируется*/\nvar min = false;\n$(document).scroll(function() {\n\tif($(document).scrollTop()>30&&!min)\n\t{\n\t\t/*Шапка маленькая*/\n\t\t$(\".line2\").toggleClass(\"header_max header_min\");\n\t\tmin = true;\n\t}\n\tif($(document).scrollTop()<=30&&min)\n\t{\n\t\t/*Шапка большая*/\n\t\t$(\".line2\").toggleClass(\"header_max header_min\");\n\t\tmin = false;\n\t}\n});"}},{"type":"paragraph","data":{"text":"Такой скрипт выглядит намного изящнее, осталось вынести его в отдельный файл и готово."}},{"type":"paragraph","data":{"text":"Хоть я и люблю свой PHPStorm, но все же советую вам посмотреть еще одно видео Sorax о текстовом редакторе Sublime Text 2:"}},{"type":"raw","data":{"html":""}}],"version":"2.13.0"}
image

Евгений

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