Javascript-форум (https://javascript.ru/forum/)
-   Мобильный JavaScript (https://javascript.ru/forum/mobile/)
-   -   Оптимизация скрипта при разных разрешениях (https://javascript.ru/forum/mobile/73782-optimizaciya-skripta-pri-raznykh-razresheniyakh.html)

Mansolide 14.05.2018 21:29

Оптимизация скрипта при разных разрешениях
 
Привет, кто поможет оптимизировать скрипт?

<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.

j0hnik 14.05.2018 21:37

http://htmlbook.ru/css/value/media
про Медиа-запросы почитайте

j0hnik 14.05.2018 21:40

если не устраивает, то https://developer.mozilla.org/ru/doc...dow/matchMedia

но никак не ресайз, зачем вам каждые пару пикселей пытаться добавлять одно и то же свойство объекту.

Mansolide 15.05.2018 05:23

Единственно что понял, что на большее понимание знаний не хватает, что и где изменить или переписать не понимаю.

Mansolide 15.05.2018 17:39

Объясните кто нить на пальцах, почему нельзя использовать 'resize', ведь пользователи часто вертят экран при просмотре на планшете, из-за этого и разрешение по ширине меняется от 678 рх до 1024 рх например, получается при просмотре на 768 рх нужно, что бы скрипт включился, а при повороте планшета на большую ширину он отключается.

Mansolide 15.05.2018 17:46

Я может в начале не правильно написал

Цитата:

Сообщение от Mansolide (Сообщение 485316)
Функция resize нужна для того, что бы если пользователь смотрит на смартфоне горизонтально при большом разрешении и перевернул его вертикально, тогда к .topblock так же добавляется тень и background.

Здесь я имел ввиду, если пользователь из горизонтального положения поворачивает планшет вертикально, то к фиксированному .topblock должна добавится тень и полупрозрачный фон, до этого на большем разрешении не было тени и фона.

j0hnik 15.05.2018 20:49

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

j0hnik 15.05.2018 20:56

вы почитали про медиа?
http://htmlbook.ru/css/value/media

можете объяснить почему нельзя их использовать?

если непонятно то почитайте еще немного
https://habr.com/post/119127/
https://habr.com/post/198292/

может не нежен вам JS? css прекрасно справится.

Mansolide 16.05.2018 00:29

Теоретически вроде понимаю, но как это реализовать на 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>


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

j0hnik 16.05.2018 00:47

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);


если будет работать не так как вы планируете, напишите подробней что и в каком случае должно происходить


Часовой пояс GMT +3, время: 14:55.