Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 16.05.2018, 01:36
Аватар для Mansolide
Новичок на форуме
Отправить личное сообщение для Mansolide Посмотреть профиль Найти все сообщения от Mansolide
 
Регистрация: 14.05.2018
Сообщений: 7

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

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

В Хроме 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>
Ответить с цитированием
  #12 (permalink)  
Старый 16.05.2018, 01:46
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

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);
Ответить с цитированием
  #13 (permalink)  
Старый 16.05.2018, 02:41
Аватар для Mansolide
Новичок на форуме
Отправить личное сообщение для Mansolide Посмотреть профиль Найти все сообщения от Mansolide
 
Регистрация: 14.05.2018
Сообщений: 7

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

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

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

Но и на этом спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Авто выполнение скрипта при открытии вкладки. FreeZon Javascript под браузер 1 28.09.2015 08:14
Соединить 2 скрипта в один или сбор информации из разных автозаполняемых полей Ilya_Ru Общие вопросы Javascript 4 07.04.2015 12:53
При выполнении скрипта появляется тень текста Maggie Javascript под браузер 16 24.08.2014 18:47
как в dreamweaver сделать чтобы шрифт и ссылки не съезжали на разных разрешениях?? ekstrimalka1 Элементы интерфейса 2 19.09.2011 11:33
Выполнение скрипта при нажатии Entet в текстовм поле Vlasssov Общие вопросы Javascript 4 23.08.2009 23:31