<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div style="height:1500px;"></div> <footer role="contentinfo"> <section id="scrolling-fixed-bar" class="section-home-page-fixed-bar" style="background:#000"> <div class="text-center container modified-container"> <div> <div class="textwidget"><h3>Interested in Throwing a Party at Coated?</h3> <a href="" class="btn btn-default">Learn More</a></div> </div> <span class="close-btn-scroll-fix-bar"><img src="https%20_www.coatednails.com_private-parties_ssssss_files/fixed-bar-close-icon.png"></span> </div> </section>

.section-home-page-fixed-bar{ background-image:url(../images/wel-bg.jpg); padding-top: 28px; padding-bottom: 28px; background-position: center; background-size: cover; background-repeat: no-repeat; /*background-color: #BA272D;*/ position: fixed; bottom: 0; width: 100%; z-index: 99; display: none; } .section-home-page-fixed-bar h3{ display: inline-block; color: #fff; font-family:'Nexa Bold'; font-weight: 400; font-size: 24.50px; padding-right: 23px; padding-left: 23px; padding-bottom: 10px; text-transform:uppercase; } .section-home-page-fixed-bar a{ display: inline-block; vertical-align: top; background-color: transparent; border: 1px solid #ec4dac; border-radius: 0; height: 33px; max-width: 140px; transition: background-color 0.5s ease 0s; color: #fff; text-transform: uppercase; font-size: 11px; line-height: 20px; } .section-home-page-fixed-bar a:hover{ background-color: #ec4dac; border-color: #000; color: #fff; } .section-footer { padding-bottom: 96px; } /*==================== re-vi-ve-footer fixed bar --spa ==================*/ span.close-btn-scroll-fix-bar { position: absolute; right: 3%; border:0px !important; top: 40%; transform: translateY(-40%); height: 15px !important; } span.close-btn-scroll-fix-bar:hover{ cursor: pointer; }

/*=============================== scrolling fixed bar ===============================*/ if( jQuery(window).width() <= 767 ){ jQuery(window).scroll(function() { if (jQuery(window).scrollTop() > 700) { jQuery("#scrolling-fixed-bar").fadeIn(1000); } else { jQuery("#scrolling-fixed-bar").fadeOut(1000); } }); } if( jQuery(window).width() >= 768 ){ jQuery(window).scroll(function() { if (jQuery(window).scrollTop() > 100) { jQuery("#scrolling-fixed-bar").fadeIn(1000); } else { jQuery("#scrolling-fixed-bar").fadeOut(1000); } }); } /*======================================== to remove scrolling bar ==========================================*/ jQuery(".close-btn-scroll-fix-bar").on("click", function(){ jQuery( "#scrolling-fixed-bar" ).remove(); });