scrolling

JavaScript, CSS: зафиксированная реклама которую видно на одном и том же месте даже при прокрутке

Posted on by mak

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

Ситуацию с этим поможет решить зафиксированный блок.

 

<div id=»myAd» style=»position: fixed; top: 10px; right: 2.78%; width: 170px; background: #ffffff; z-index: 1; visibility: hidden;»> 

Здесь код баннера

</div>

в стилях для этого необходимо кроме прочих настроек отображения (здесь рассматривается общий случай, поэтому нет смысла описывать весь стиль этого элемента, т.к. у Вас всё равно будет частный случай):

position: fixed;

как видите из кода DIV’а, этот элемент изначально скрыт. Для того чтобы при прокрутке он отобразился, необходимо добавить JavaScript:

window.onscroll = function() {

	var scrolled = window.pageYOffset || document.documentElement.scrollTop;

	if (scrolled>2850){
		document.getElementById('myAd').style.visibility = 'visible';
	}
	else{
		document.getElementById('myAd').style.visibility = 'hidden';
	}
}

JavaScript: делаем прокрутку на сайте вверх-вниз, без использования jQuery

Posted on by mak 
В html коде страницы создаём в любом месте в пределах тега body (лишь бы не внутри любого другого контейнера),

<div id="scrollBack" onClick="scrollBack()"></div>

в пределах тегов <head></head> пишем следующий код:
var oldPos;
window.onscroll = function() {

	var scrolled = window.pageYOffset || document.documentElement.scrollTop;

	if (scrolled>0){
		document.getElementById('scrollBack').style.visibility = 'visible';
		document.getElementById('scrollBack').innerHTML = 'Up'; //здесь можно подставить например картинку со стрелкой вверх
	}
	else
	{
		document.getElementById('scrollBack').innerHTML = 'Down';// а здесь можно подставить например картинку со стрелкой ввниз
	}
}

function scrollBack(){

	if (window.pageYOffset || document.documentElement.scrollTop > 0){
		oldPos = window.pageYOffset || document.documentElement.scrollTop;
		window.scrollTo(0,0);
	}
	else{
		window.scrollTo(0,oldPos);
	}
}

а в стилях настраиваем нашу панельку с id scrollBack таким образом, чтобы она была слева, зафиксированна, и необходимой длины (я для примера использовал 100%ную высоту)

вот содержимое моего css:

#scrollBack {
			position: fixed;
			left: 1px;
			top: 0px;
			width: 80px;
			height: 100%;
			opacity: 0;
			font-family: sans-serif;
			font-weight: bold;
			font-size: 0.5em;
			color: #000088;
			background: #e0e0ff;
			border: 1px solid #fff;
			padding: 2px;}
#scrollBack:hover {opacity: 0.8;}