Оптимизация скрипта при разных разрешениях
Привет, кто поможет оптимизировать скрипт?
<script type='text/javascript'>
$(function(){
$(window).on('resize', (function() {
if ($(window).width() < 769) {
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 1) $('.topblock').css({'box-shadow':'none','background':'rgba(255,255,255,0.0)'});
else $('.topblock').css({'box-shadow':'0 0 2px rgba(0,0,0,0.5)','background':'rgba(255,255,255,0.9)'});
});
} else {}
}));
});
</script>
Данный скрипт в мобильной версии менее чем 769 рх к фиксированному блоку .topblock добавляет тень и полупрозрачный background. В самом блоке находится основное меню и меню гамбургер. Функция resize нужна для того, что бы если пользователь смотрит на смартфоне горизонтально при большом разрешении и перевернул его вертикально, тогда к .topblock так же добавляется тень и background. Скрипт работает не совсем коректно, в Мобайл Хром на Sony работает, а в Опере на этом же телефоне нет. Так же при обновлении страницы или при переходе на другую страницу, скрипт тоже работает не корректно, тень есть, полупрозрачный background отсутствует. Это например можно проверить в Десктопе Хрома нажам F12 и выбрать разрешение 768 рх или меньше. Если сайт проверить в responsinator.com, то там вообще не работает ничего, нет тени и нет background. |
http://htmlbook.ru/css/value/media
про Медиа-запросы почитайте |
если не устраивает, то https://developer.mozilla.org/ru/doc...dow/matchMedia
но никак не ресайз, зачем вам каждые пару пикселей пытаться добавлять одно и то же свойство объекту. |
Единственно что понял, что на большее понимание знаний не хватает, что и где изменить или переписать не понимаю.
|
Объясните кто нить на пальцах, почему нельзя использовать 'resize', ведь пользователи часто вертят экран при просмотре на планшете, из-за этого и разрешение по ширине меняется от 678 рх до 1024 рх например, получается при просмотре на 768 рх нужно, что бы скрипт включился, а при повороте планшета на большую ширину он отключается.
|
Я может в начале не правильно написал
Цитата:
|
resize использовать можно, но вам нужна только одна контрольная точка, перескочив которую добавляется css свойство, а для этого есть более подходящее событие.
|
вы почитали про медиа?
http://htmlbook.ru/css/value/media можете объяснить почему нельзя их использовать? если непонятно то почитайте еще немного https://habr.com/post/119127/ https://habr.com/post/198292/ может не нежен вам JS? css прекрасно справится. |
Теоретически вроде понимаю, но как это реализовать на JS не знаю, а полностью на CSS это не решить.
Изначально .topblock не фиксированный и в десктопном режиме скролится в месте со страницей. А в мобильном разрешении от 768рх и ниже он фиксированный и для лучшее визуального восприятия к нему добавляется тень и полупрозрачность. Для этого нужно отследить скрол и смену разрешения. Можно конечно сразу в основной CSS добавить тень и полупрозрачность и отслеживать только скроллинг, изначально так и было и был простой скрипт
<script type='text/javascript'>
$(function(){
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top < 1) $('.topblock').css({'box-shadow':'none','background':'rgba(255,255,255,0.0)'});
else $('.topblock').css({'box-shadow':'0 0 2px rgba(0,0,0,0.5)','background':'rgba(255,255,255,0.9)'});
});
});
</script>
Но в десктопе считаю это лишним, потому пошёл дальше и дошёл до отслеживания разрешения и ресайза и заметил баги. |
function addRemoveCSS (){
var top = $(document).scrollTop();
var flag = $(window).width() < 769 && top < 1;
if(flag && $('.topblock').css('box-shadow') !== 'none') $('.topblock').css({'box-shadow':'none','background':'rgba(255,255,255,0.0)'});
if(!flag && $('.topblock').css('box-shadow') === 'none') $('.topblock').css({'box-shadow':'0 0 2px rgba(0,0,0,0.5)','background':'rgba(255,255,255,0.9)'});
}
addRemoveCSS(); // если при загрузке запускать не нужно. удалите эту строку
$(window).scroll(addRemoveCSS);
matchMedia('(min-width: 769px)').addListener(addRemoveCSS);
если будет работать не так как вы планируете, напишите подробней что и в каком случае должно происходить |
Спасибо, такой код мне не понятен, как его редактировать не знаю потому отпишусь, удалил строку загрузки, что бы сразу не запускалось.
При открытии сайта в десктопе всё нормально, но при скроле скрипт запускает появление тени полупрозрачности, при возвращении на верх, тень и полупрозрачность остаётся, то есть при скролле скрипт запускается полностью и не отключается, а в десктопе он вообще не должен работать. В Хроме F12 мобильный вид, работает как и задумано, тень и полупрозрачность появляется при скролле, при возврате убирается и виден основной общий фон страницы, то есть всё хорошо. При увеличении ширины более чем 768рх при скролле скрипт запускается снова. Привожу код, что бы было видно подключении, так как даже синтаксис плохо освоил, потому мало ли ошибся.
<script type='text/javascript'>
$(function(){
function addRemoveCSS (){
var top = $(document).scrollTop();
var flag = $(window).width() < 769 && top < 1 && $('.topblock').css('box-shadow') !== 'none';
if(flag) $('.topblock').css({'box-shadow':'none','background':'rgba(255,255,255,0.0)'});
else $('.topblock').css({'box-shadow':'0 0 2px rgba(0,0,0,0.5)','background':'rgba(255,255,255,0.9)'});
}
$(window).scroll(addRemoveCSS);
matchMedia('(min-width: 769px)').addListener(addRemoveCSS);
});
</script>
|
Mansolide,
function addRemoveCSS (){
var top = $(document).scrollTop();
var flag = $(window).width() < 769 && top > 1;
if(!flag && $('.topblock').css('box-shadow') !== 'none') $('.topblock').css({'box-shadow':'none','background':'rgba(255,255,255,0.0)'});
if(flag && $('.topblock').css('box-shadow') === 'none') $('.topblock').css({'box-shadow':'0 0 2px rgba(0,0,0,0.5)','background':'rgba(255,255,255,0.9)'});
}
$(window).scroll(addRemoveCSS);
matchMedia('(min-width: 769px)').addListener(addRemoveCSS);
|
Вроде всё нормально спасибо, в трёх браузерах на десктопе и трёх браузерах на телефоне Sony.
Единственное на телефоне в трёх браузерах при возврате на предыдущую страницу когда она открывается на половине и .topblock как бы по идее должен быть сразу с тенью и полупрозрачностью, а прозрачный и без тени, но при скроле вверх или вниз всё появляется и тень и полупрозрачность, это наверно особенность телефона или браузера? И есть баг при просмотре в responsinator.com там в мобильной версии .topblock сразу с тенью и полупрозрачностью, при скроле начинает работать как надо, скрол вниз - появляется тень и полупрозрачность, возвращаешься наверх убирается, но стоит ли доверять этому сервису не знаю. Но и на этом спасибо. |
| Часовой пояс GMT +3, время: 20:02. |