Оптимизация скрипта при разных разрешениях

[Mansolide]

Привет, кто поможет оптимизировать скрипт?

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

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

[j0hnik]

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

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

[Mansolide]

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

[Mansolide]

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

[Mansolide]

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

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

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

[j0hnik]

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

[j0hnik]

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

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

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

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

[Mansolide]

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

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

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