Banner (Lower Corner)

Change class after scroll somewhere

by ybombale

HTML

<div>>allyViral
  <br />to help
  <br />increase social
  <br /> sharing, you'll
  <br /> get more
  <br /> traffic
  <br />and
  <br /> most
  <br />importantly, boost
  <br /> viral
  <br />traffic. With
  <br /> features
  <br />to help
  <br />increase social
  <br /> sharing, you'll
  <br /> get more
  <br /> traffic
  <br />from the
  <br /> web's top
  <br />social
  <br /> media
  <br />websites
  <br /> and
  <br />also
  <br />boost
  <br /> your
  <br /> search
  <br />engine
  <br />rankings
  <br />viral
  <br />traffic. With
  <br /> features
  <br />to help
  <br />increase social
  <br /> sharing, you'll
  <br /> get more
  <br /> traffic
  <br />from the
  <br /> web's top
  <br />social
  <br /> media
  <br />websites
  <br /> and
  <br />also
  <br />boost
  <br /> your
  <br /> search
  <br />engine
  <br />rankings
  <br />.</div>


<div id="my-popbanner" class="popbanner" style="text-align: left; position: fixed; bottom: 20px; right: 70px; background: #fff; line-height: 1.4; padding: 10px; border-radius: 5px; max-width: 392px; width: 392px; height: auto; border: 5px solid #51B4D3;">
  <img src="https://cdn.mythemeshop.com/wp-content/uploads/2016/03/eric.jpg" width="110" height="100" style="float: left;position: absolute;left: -60px;top: -12px;border-radius: 50%;border: 5px solid #51B4D3;" scale="0">
  <div style="max-width: 309px;float: right;margin-top: 5px;color: #000;font-size: 16px;">Download <strong>23 WordPress themes &amp; plugins</strong>​ with lifetime support for <strong>FREE!</strong></div>
  <a href="http://google.com" target="_blank" style="float: right; color: #FF6A00; font-size: 14px; border-bottom: 1px dotted #FF6A00;"> <b>>> Click here to Join<<</b> </a>
  <div onclick="hide('my-popbanner')" style="position: absolute;top: -15px;right: -14px;text-align: center;width: 24px;line-height: 16px;background: #fff;color: #2bb0e8;border: 3px solid #2bb0e8;border-radius: 50%;font-size: 15px; cursor: pointer; padding-bottom:...

CSS

body {
  height: 1600px;
}

*,
*:before,
*:after {
  box-sizing: border-box
}

img {
  max-width: 100%;
  height: auto!important;
}

a {
  text-decoration: none;
  color: inherit;
  transition: all .25s linear;
}

/*********  Latest code addes *******/
@media only screen and (-webkit-max-device-pixel-ratio: 2) and (max-device-width: 80em) {
  .switch-light {
    -webkit-animation: webkitSiblingBugfix infinite 1s
  }
}

.popbanner {
  transition: all .25s linear;
  opacity: 0;
}

.show-popbanner,
.show-eric-icon {
  opacity: 1
}

JavaScript

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
  //console.log(scroll);
  if (scroll >= 100) {
    //console.log('a');
    $("#my-popbanner").addClass("show-popbanner");
  } else {
    //console.log('a');
    $("#my-popbanner").removeClass("show-popbanner");
  }
});

function hide(target) {
  document.getElementById(target).style.display = 'none';
};