CodePen Embed - ZExaNEJ

<div style="margin-bottom: 1000px">
<div class="fixed_widget hidden" data-fixed-initiator="div.promo_section.promo_4" data-fixed-stopper="footer">
  <div class="bg_filler"></div>
  <div class="container_block">
      <div class="widget_elements">
        <div class="limited_coupon" id="limited_coupon" data-text="Save33">
          <div class="coupon_text">Save33 <span><i class="fa fa-external-link" aria-hidden="true"></i></span></div>
        </div>
        <div class="widget_text">
          <p class="promo pc"> <span>Save 33%</span> with promo code <span>"SAVE33"!</span></p>
          <p class="promo mobile">Stuck at Rank? Get Best Offer!</p>
          <p class="subtitle pc"><span class="offers">Today Offers Left:</span>  <span class="count">3 </span></p>
          <p class="subtitle mobile"><span class="discount">SAVE 33%!</span> <span class="offers">Offers Left:</span> <span class="count">3 </span></p>
        </div>
    <div class="widget_action">
      <div class="button_block">
        <div class="button_filler link css_green no_shadow">
    <a href="/ru/prices">
  <div class="button css_green no_shadow" data-action="link">
    УЗНАТЬ ЦЕНЫ
  </div>
    </a>
</div>
      </div>
    </div>
    <div class="close_nav" data-action="close_widget"><i class="tmpl template-cancel" aria-hidden="true"></i></div>
    </div>
    </div>
    </div>

/*! CSS Used from: https://eloboosters.b-cdn.net/assets/main_styles-6ac61f58520778f4926b721ca8de76dc81864990f5003a0c2acf9405eb1f4922.css ; media=all */
@media all{
*{margin:0;padding:0;border:0;border-spacing:0;text-decoration:none;list-style-type:none;-webkit-font-smoothing:antialiased;font-family:'Roboto', sans-serif;}
a{color:white;text-decoration:none;}
a:hover{text-decoration:none;color:white;cursor:pointer;}
.fixed_widget{width:100%;position:fixed;bottom:0;background:linear-gradient(to right, #284C64, #1f1e4e);z-index:9;display:block;}
.fixed_widget.hidden{display:none;}
.fixed_widget .bg_filler{opacity:0.2;position:absolute;width:100%;height:100%;left:0;top:0;background:url(https://eloboosters.b-cdn.net/assets/backgrounds/elo-boosters-sticky-banner-background-606fc60d609ed5f6e185cc8c58a49d03eea08600676fa717c2dc18a2e328d0aa.jpg) no-repeat center center/cover;}
.fixed_widget .widget_elements{display:flex;flex-direction:row;justify-content:center;align-items:center;padding:5px 0;}
.fixed_widget .widget_elements .close_nav{display:none;}
.fixed_widget .widget_elements .limited_coupon{cursor:pointer;width:152px;height:48px;background:url(https://eloboosters.b-cdn.net/assets/icons/coupon-e9422701a1eae7c036f365f29ad06ba95718eafdca53c1fb963adce65de3a5ca.png) no-repeat top center;background-size:cover;text-align:center;vertical-align:middle;margin:10px 0px 10px 0;}
.fixed_widget .widget_elements .limited_coupon .coupon_text{font-size:16px;font-weight:bold;line-height:24px;color:white;margin:13px 0;text-transform:uppercase;}
.fixed_widget .widget_elements .limited_coupon .coupon_text span{display:none;}
.fixed_widget .widget_elements .widget_text{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;margin:0 60px 0 20px;}
.fixed_widget .widget_elements .widget_text>p{color:white;font-size:15px;}
.fixed_widget .widget_elements .widget_text>p.promo{font-size:18px;line-height:24px;font-weight:500;opacity:1;}
.fixed_widget .widget_elements .widget_text>p.promo.pc{display:block;}
.fixed_widget .widget_elements .widget_text>p.promo.mobile{display:none;}
.fixed_widget .widget_elements .widget_text>p.subtitle.pc{display:block;}
.fixed_widget .widget_elements .widget_text>p.subtitle.mobile{display:none;}
.fixed_widget .widget_elements .widget_text>p>span{color:#55acee;opacity:1;font-weight:bold;}
.fixed_widget .widget_elements .widget_text>p>span.offers{color:white;opacity:0.7;font-weight:400;}
.fixed_widget .widget_elements .widget_text>p>span.count{opacity:1;color:white;font-size:18px;}
.fixed_widget .widget_elements .button_block{width:260px;}
.fixed_widget .widget_elements .button_block>.button_filler{margin-top:0;}
.container_block{max-width:1280px;margin:0 auto;box-sizing:border-box;position:relative;}
.button_filler{width:100%;position:relative;margin-top:10px;display:block;text-align:center;}
.button_filler>a{display:inline-block;width:inherit;}
.button_filler>a>.button{padding:1px 10px 0;}
.button_filler.no_shadow:before{display:none;}
.button_filler:before{content:"";display:block;position:absolute;width:92%;z-index:0;height:100%;top:3px;left:4%;box-shadow:0 3px 3px 0 black;border-radius:10px;opacity:0.4;}
.button_filler .button{width:100%;text-align:center;height:100%;min-height:40px;border-radius:10px;box-sizing:border-box;padding-top:1px;line-height:39px;position:relative;color:whitesmoke;cursor:pointer;font-size:16px;font-weight:300;}
.button_filler .button.css_green{background:top;background:-moz-linear-gradient(top, #55acee 0%, #4894cd 100%);background:-webkit-linear-gradient(top, #55acee 0%, #4894cd 100%);background:linear-gradient(to bottom, #55acee 0%, #4894cd 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#55acee', endColorstr='#4894cd',GradientType=0 );box-shadow:0 3px 0 #31648b;}
.button_filler .button.css_green:hover{background:top;background:-moz-linear-gradient(top, #4894cd 0%, #3d7ba9 100%);background:-webkit-linear-gradient(top, #4894cd 0%, #3d7ba9 100%);background:linear-gradient(to bottom, #4894cd 0%, #3d7ba9 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#4894cd', endColorstr='#3d7ba9',GradientType=0 );box-shadow:0 3px 0 #2c5777;}
.button_filler .button.css_green:disabled{background:top;background:-moz-linear-gradient(top, #f0f0f0 0%, #dbdbdb 100%);background:-webkit-linear-gradient(top, #f0f0f0 0%, #dbdbdb 100%);background:linear-gradient(to bottom, #f0f0f0 0%, #dbdbdb 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0f0f0', endColorstr='#dbdbdb',GradientType=0 );box-shadow:0 3px 0 #7b7b7b;color:#989898;}
.button_filler .button:active,.button_filler .button:focus{outline:none;}
.bg_filler{background:white;}
@media only screen and (max-width: 1279px){
.container_block{max-width:992px;}
}
@media only screen and (max-width: 991px){
.container_block{max-width:768px;}
.container_block .widget_elements .widget_text{margin:0 10px 0 10px;}
}
@media only screen and (max-width: 767px){
.container_block{max-width:330px;}
.container_block .widget_elements{padding:8px 0;justify-content:flex-start;}
.container_block .widget_elements .close_nav{display:block;cursor:pointer;color:white;opacity:0.7;position:absolute;top:35%;right:-7px;}
.container_block .widget_elements .limited_coupon{width:122px;height:38px;margin:0;}
.container_block .widget_elements .limited_coupon .coupon_text{font-size:13px;margin-top:8px;}
.container_block .widget_elements .limited_coupon .coupon_text span{display:inline-flex;margin-left:5px;}
.container_block .widget_elements .widget_text{margin:0 0px 0 7px;max-width:275px;}
.container_block .widget_elements .widget_text p.promo{font-size:14px;}
.container_block .widget_elements .widget_text p.promo.pc{display:none;}
.container_block .widget_elements .widget_text p.promo.mobile{display:block;}
.container_block .widget_elements .widget_text p.subtitle.pc{display:none;}
.container_block .widget_elements .widget_text p.subtitle.mobile{display:block;}
.container_block .widget_elements .widget_text p.subtitle.mobile span.offers{font-weight:400;}
.container_block .widget_elements .widget_action{display:none;}
}
.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.fa-external-link:before{content:"";}
}
/*! CSS Used from: https://eloboosters.b-cdn.net/assets/template-font-6aac6940ffec647ab3809db9d74f1b8a2f8b6c8f480a603a73b5c535a2f25844.css ; media=all */
@media all{
.tmpl{font-family:'template_font';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
.tmpl.template-cancel:before{content:"\e926";}
}
/*! CSS Used fontfaces */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');unicode-range:U+0370-03FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fABc4EsA.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBxc4EsA.woff2) format('woff2');unicode-range:U+0370-03FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fCxc4EsA.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fChc4EsA.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBBc4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCRc4EsA.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfABc4EsA.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCBc4EsA.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBxc4EsA.woff2) format('woff2');unicode-range:U+0370-03FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfCxc4EsA.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfChc4EsA.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtfCRc4EsA.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtfABc4EsA.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtfCBc4EsA.woff2) format('woff2');unicode-range:U+1F00-1FFF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtfBxc4EsA.woff2) format('woff2');unicode-range:U+0370-03FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtfCxc4EsA.woff2) format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtfChc4EsA.woff2) format('woff2');unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:900;font-display:swap;src:url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmYUtfBBc4.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'FontAwesome';src:url("https://eloboosters.b-cdn.net/assets/font-awesome/fontawesome-webfont-7bfcab6db99d5cfbf1705ca0536ddc78585432cc5fa41bbd7ad0f009033b2979.eot?v=4.7.0");src:url("https://eloboosters.b-cdn.net/assets/font-awesome/fontawesome-webfont-7bfcab6db99d5cfbf1705ca0536ddc78585432cc5fa41bbd7ad0f009033b2979.eot?v=4.7.0#iefix") format("embedded-opentype"),url("https://eloboosters.b-cdn.net/assets/font-awesome/fontawesome-webfont-2adefcbc041e7d18fcf2d417879dc5a09997aa64d675b7a3c4b6ce33da13f3fe.woff2?v=4.7.0") format("woff2"),url("https://eloboosters.b-cdn.net/assets/font-awesome/fontawesome-webfont-ba0c59deb5450f5cb41b3f93609ee2d0d995415877ddfa223e8a8a7533474f07.woff?v=4.7.0") format("woff"),url("https://eloboosters.b-cdn.net/assets/font-awesome/fontawesome-webfont-aa58f33f239a0fb02f5c7a6c45c043d7a9ac9a093335806694ecd6d4edc0d6a8.ttf?v=4.7.0") format("truetype"),url("https://eloboosters.b-cdn.net/assets/font-awesome/fontawesome-webfont-ad6157926c1622ba4e1d03d478f1541368524bfc46f51e42fe0d945f7ef323e4.svg?v=4.7.0#fontawesomeregular") format("svg");font-weight:normal;font-style:normal;}
@font-face{font-family:'template_font';src:url("https://eloboosters.b-cdn.net/assets/Template/template_font-551efb0e7b723a0df37f00ca5ea2db8ed1292c98466825efc0c2e647e55ce7e4.ttf?dp85az") format("truetype"),url("https://eloboosters.b-cdn.net/assets/Template/template_font-d698df9945db2a96af698e984402f36ce6baf4c34e7a55604ce2d397a3d10d20.woff?dp85az") format("woff"),url("https://eloboosters.b-cdn.net/assets/Template/template_font-7654fecb9eb567323c5b08dc7853b4d4e460c7e8f24e60e874620e6affa552d8.svg?dp85az#template_font") format("svg");font-weight:normal;font-style:normal;font-display:swap;}

(function($){
  let limit = 500,
    top = 0;
const fix = $('.fixed_widget');
$(window).on('scroll', function() {
  top = $(this).scrollTop();
  console.log(top);
  if (top >= limit) {
    !fix.hasClass('showed') && fix.addClass('showed').removeClass('hidden');
  } else {
    !fix.hasClass('hidden') && fix.addClass('hidden').removeClass('showed');
    //fix.addClasss('hidden').removeClass('showed');
  }
});
})(jQuery)

This Pen is owned by ProjectSoft on CodePen. It is a fork of this Pen.

See more by @ProjectSoft on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js