Sticky

Sticky Ad Block on right follows you down the page

by Ben Clayton

HTML

JS equivalent to CSS position:sticky

<div class="header">Header</div>
<div class="content">
  <div class="track">
    <div class="advert"></div>
  </div>
  Content
</div>
<div class="footer">Footer</div>

CSS

.header,
.footer {
  border: 1px solid green;
  height: 400px;
  margin: 5px 0px;
}

.footer {
  height: 1000px;
}

.content {
  border: 1px solid green;
  height: 2000px;
  position: relative;
}

.track {
  border: 1px dotted red;
  position: absolute;
  width: 50px;
  right: 2px;
  height: 100%;
  margin: 0px;
}

.advert {
  border: 1px solid green;
  height: 45px;
  width: 45px;
  position: fixed;
}

JavaScript

var advert = document.querySelector('.advert')
var advertTrack = document.querySelector('.content'); // or use track element instead of content
var advertTop = (window.innerHeight / 2) - (advert.offsetHeight / 2); // vertical centering
var advertMarginTopBottom = 10;

function positionad() {
	// these should be constant but they may change as picture load late.
  var advertTrackTop = advertTrack.offsetTop;
  var advertTrackBottom = advertTrack.offsetHeight + advertTrackTop;

  if ((advertTrackTop - window.pageYOffset + advertMarginTopBottom) > advertTop) {
    advert.style.top = (advertTrackTop - window.pageYOffset + advertMarginTopBottom) + 'px';
  } else if ((advertTrackBottom - window.pageYOffset - advertMarginTopBottom) < (advertTop + advert.offsetHeight)) {
    advert.style.top = ((advertTrackBottom - window.pageYOffset - advertMarginTopBottom) - advert.offsetHeight) + 'px';
  } else {
    advert.style.top = advertTop + 'px';
  }
}

window.addEventListener('scroll', function() {
  positionad();
});

positionad();