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

Mansolide 16.05.2018 01:36

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

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

В Хроме 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>

j0hnik 16.05.2018 01:46

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

Mansolide 16.05.2018 02:41

Вроде всё нормально спасибо, в трёх браузерах на десктопе и трёх браузерах на телефоне Sony.

Единственное на телефоне в трёх браузерах при возврате на предыдущую страницу когда она открывается на половине и .topblock как бы по идее должен быть сразу с тенью и полупрозрачностью, а прозрачный и без тени, но при скроле вверх или вниз всё появляется и тень и полупрозрачность, это наверно особенность телефона или браузера?

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

Но и на этом спасибо.


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