Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <style>
- #sticky-form { display:none;position:fixed;z-index:100;bottom: 0px;left: 0px;border-top: 3px solid #a41c84;background: white; width:100%; }
- #sticky-form .mobile { display: block; }
- #sticky-form .tablet { display: none; }
- #sticky-form .desktop { display: none; }
- #sticky-form .mobile .row { padding: 10px !important; }
- #sticky-form .mobile .col { margin: 0px !important; }
- #sticky-form .mobile .img { width: 50%; margin-bottom: 0px !important; }
- #sticky-form .mobile .img img { max-width:100%; }
- #sticky-form .mobile .text { width: 50%; line-height: 20px; margin-bottom: 0px !important; }
- #sticky-form .mobile .text span { width: 100%;text-align: center;display: inline-block;font-size: 13px; }
- #sticky-form .mobile .text a { width: 100%;text-align: center;display: inline-block;line-height: 27px;border-radius: 2px;background: #a41c84;color: white;font-weight: bold; }
- @media all and (min-width: 600px) and (max-width: 999px) {
- /* Tablet version */
- #sticky-form .mobile { display: none; }
- #sticky-form .tablet { display: block; }
- #sticky-form .desktop { display: none; }
- #sticky-form .tablet .row { padding: 10px !important; }
- #sticky-form .tablet .col { margin: 0px !important; }
- #sticky-form .tablet .img { width: 50%; margin-bottom: 0px !important; }
- #sticky-form .tablet .img img { max-width:100%; }
- #sticky-form .tablet .text { width: 50%; line-height: 20px; margin-bottom: 0px !important; }
- #sticky-form .tablet .text span { width: 100%;text-align: center;display: inline-block;font-size: 13px; }
- #sticky-form .tablet .text a { width: 100%;text-align: center;display: inline-block;line-height: 27px;border-radius: 2px;background: #a41c84;color: white;font-weight: bold; }
- }
- @media all and (min-width: 1000px) {
- /* Desktop verison */
- #sticky-form { padding: 10px 0px;height: 60px; }
- #sticky-form .mobile { display:none; }
- #sticky-form .tablet { display:none; }
- #sticky-form .desktop { display: block; }
- #stycky-form .desktop .img { }
- #sticky-form .desktop .img img { max-width:100%;margin-top: -60px; }
- #sticky-form .desktop .text { text-align: right; line-height: 20px; font-size: 14px;}
- #sticky-form .desktop .btn { line-height: 16px; height: 100% !important; padding: 0 !important; }
- #sticky-form .desktop .btn a { display: inline-block;width: 100%;height: 100%;color: white;background: #af1e8d;padding: 5px;text-transform: uppercase;font-weight: bold;text-align: center;box-sizing: border-box;border-radius: 5px; }
- }
- </style>
- <section id="sticky-form">
- <div class="mobile container-fluid">
- <div class="row">
- <div class="img col">
- <img src="//media.numerologist.com/uploads/2017/02/10052311/tst44_img.png">
- </div>
- <div class="text col">
- <span>YOUR<br>PERSONALIZED<br><strong>NUMEROLOGY REPORT</strong></span>
- <br>
- <a href="http://video.numerologist.com/">START VIDEO NOW</a>
- </div>
- </div>
- </div>
- <div class="tablet container">
- <div class="row">
- <div class="img col">
- <img src="//media.numerologist.com/uploads/2017/02/10052311/tst44_img.png">
- </div>
- <div class="text col">
- <span>YOUR<br>PERSONALIZED<br><strong>NUMEROLOGY REPORT</strong></span>
- <br>
- <a href="http://video.numerologist.com/">START VIDEO NOW</a>
- </div>
- </div>
- </div>
- <div class="desktop container">
- <div class="row">
- <div class="img col span_3">
- <img src="//media.numerologist.com/uploads/2017/02/10052311/tst44_img.png">
- </div>
- <div class="text col span_6">Customized to you exact birth date and name, this personalized<br>numerology report will shed light on your core numbers and life purpose.</div>
- <div class="btn col span_3">
- <a href="http://video.numerologist.com/">Get you free<br>numerology report</a>
- </div>
- </div>
- </div>
- </section>
- <script>
- (function($){
- function isVisible(offset, offset2) {
- var docViewTop = $(window).scrollTop();
- var docViewBottom = docViewTop + $(window).height();
- return ((offset <= docViewBottom) && (offset + offset2 >= docViewTop));
- }
- $(document).ready(function(){
- var $header = $('#page-header-wrap');
- var $footer = $('#footer-outer');
- var $form = $('#sticky-form');
- function onScroll(){
- if (isVisible($header.get(0).offsetTop + $header.get(0).offsetHeight, 0)) {
- //$form.hide();
- $form.slideUp();
- return;
- }
- if (isVisible($footer.get(0).offsetTop, 0) || $footer.get(0).offsetTop <= window.pageYOffset) {
- //$form.hide();
- $form.slideUp();
- return;
- }
- //$form.show();
- $form.slideDown();
- }
- onScroll();
- $(document).scroll(onScroll);
- });
- })(jQuery);
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement