Привет, кто поможет оптимизировать скрипт?
<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.