Здесь предлагаю вам посмотреть как можно осуществить идею прилипание блока (рекламы, баннеров и прочего) при прокрутке страницы. Как только пользователь достигнет данного блока, он прилипнет и будет так висеть до тех пор пока не коснется подвала перед ним остановиться. Некоторое время назад использовал такой вариант, но вскоре решено было от него отказаться. Причины могу описать в личных сообщения)
Вставляем это в страницу где будет этот блок.
Код
<main>
<aside id="aside1">
Содержание блок (код рекламы к примеру)
</aside></main>
Для удобства следующий код я разместил сразу же.
Код
<span class="sticky">
<span class="stop">
<script>
(function(){
var a = document.querySelector('#aside1'), b = null, P = 5;
window.addEventListener('scroll', Ascroll, false);
document.body.addEventListener('scroll', Ascroll, false);
function Ascroll() {
if (b == null) {
var Sa = getComputedStyle(a, ''), s = '';
for (var i = 0; i < Sa.length; i++) {
if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) {
s += Sa [i]+ ': ' +Sa.getPropertyValue(Sa[i]) + '; '
}
}
b = document.createElement('div');
b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;';
a.insertBefore(b, a.firstChild);
var l = a.childNodes.length;
for (var i = 1; i < l; i++) {
b.appendChild(a.childNodes[1]);
}
a.style.height = b.getBoundingClientRect().height + 'px';
a.style.padding = '0';
a.style.border = '0';
}
var Ra = a.getBoundingClientRect(),
R = Math.round(Ra.top + b.getBoundingClientRect().height - document.querySelector('footer').getBoundingClientRect().top + 0); // селектор блока, при достижении верхнего края которого нужно открепить прилипающий элемент; Math.round() только для IE; если ноль заменить на число, то блок будет прилипать до того, как нижний край элемента дойдёт до футера
if ((Ra.top - P) <= 0) {
if ((Ra.top - P) <= R) {
b.className = 'stop';
b.style.top = - R +'px';
} else {
b.className = 'sticky';
b.style.top = P + 'px';
}
} else {
b.className = '';
b.style.top = '';
}
window.addEventListener('resize', function() {
a.children[0].style.width = getComputedStyle(a, '').width
}, false);
}
};))
</script>
</span>
</span>
Так же добавим стили
Код
/*Прилипание правого блока*/
.sticky {
position: fixed;
z-index: 101;
}
.stop {
position: relative;
z-index: 101;
}
