Advertisement
Guest User

Untitled

a guest
Apr 27th, 2017
151
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.62 KB | None | 0 0
  1. <style>
  2. #sticky-form { display:none;position:fixed;z-index:100;bottom: 0px;left: 0px;border-top: 3px solid #a41c84;background: white; width:100%; }
  3.  
  4.  
  5. #sticky-form .mobile { display: block; }
  6. #sticky-form .tablet { display: none; }
  7. #sticky-form .desktop { display: none; }
  8.  
  9. #sticky-form .mobile .row { padding: 10px !important; }
  10. #sticky-form .mobile .col { margin: 0px !important; }
  11.  
  12. #sticky-form .mobile .img { width: 50%; margin-bottom: 0px !important; }
  13. #sticky-form .mobile .img img { max-width:100%; }
  14.  
  15. #sticky-form .mobile .text { width: 50%; line-height: 20px; margin-bottom: 0px !important; }
  16. #sticky-form .mobile .text span { width: 100%;text-align: center;display: inline-block;font-size: 13px; }
  17. #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; }
  18.  
  19. @media all and (min-width: 600px)  and (max-width: 999px) {
  20. /* Tablet version */
  21.  
  22.  
  23. #sticky-form .mobile { display: none; }
  24. #sticky-form .tablet { display: block; }
  25. #sticky-form .desktop { display: none; }
  26.  
  27. #sticky-form .tablet .row { padding: 10px !important; }
  28. #sticky-form .tablet .col { margin: 0px !important; }
  29.  
  30. #sticky-form .tablet .img { width: 50%; margin-bottom: 0px !important; }
  31. #sticky-form .tablet .img img { max-width:100%; }
  32.  
  33. #sticky-form .tablet .text { width: 50%; line-height: 20px; margin-bottom: 0px !important; }
  34. #sticky-form .tablet .text span { width: 100%;text-align: center;display: inline-block;font-size: 13px; }
  35. #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; }
  36.  
  37. }
  38.  
  39. @media all and (min-width: 1000px) {
  40. /* Desktop verison */
  41. #sticky-form { padding: 10px 0px;height: 60px; }
  42.  
  43. #sticky-form .mobile { display:none; }
  44. #sticky-form .tablet { display:none; }
  45. #sticky-form .desktop { display: block; }
  46.  
  47. #stycky-form .desktop .img {  }
  48. #sticky-form .desktop .img img { max-width:100%;margin-top: -60px; }
  49.  
  50. #sticky-form .desktop .text { text-align: right; line-height: 20px; font-size: 14px;}
  51.  
  52. #sticky-form .desktop .btn { line-height: 16px; height: 100% !important; padding: 0 !important; }
  53. #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; }
  54.  
  55. }
  56. </style>
  57. <section id="sticky-form">
  58.     <div class="mobile container-fluid">
  59.         <div class="row">
  60.             <div class="img col">
  61.                 <img src="//media.numerologist.com/uploads/2017/02/10052311/tst44_img.png">
  62.             </div>
  63.  
  64.             <div class="text col">
  65.                 <span>YOUR<br>PERSONALIZED<br><strong>NUMEROLOGY REPORT</strong></span>
  66.                 <br>               
  67.                 <a href="http://video.numerologist.com/">START VIDEO NOW</a>
  68.             </div>
  69.         </div>
  70.     </div>
  71.     <div class="tablet container">
  72.         <div class="row">
  73.             <div class="img col">
  74.                 <img src="//media.numerologist.com/uploads/2017/02/10052311/tst44_img.png">
  75.             </div>
  76.  
  77.             <div class="text col">
  78.                 <span>YOUR<br>PERSONALIZED<br><strong>NUMEROLOGY REPORT</strong></span>
  79.                 <br>               
  80.                 <a href="http://video.numerologist.com/">START VIDEO NOW</a>
  81.             </div>
  82.         </div>
  83.     </div>
  84.     <div class="desktop container">
  85.         <div class="row">
  86.             <div class="img col span_3">
  87.                 <img src="//media.numerologist.com/uploads/2017/02/10052311/tst44_img.png">
  88.             </div>
  89.             <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>
  90.  
  91.             <div class="btn col span_3">
  92.                 <a href="http://video.numerologist.com/">Get you free<br>numerology report</a>
  93.             </div>
  94.         </div>
  95.     </div>
  96. </section>
  97. <script>
  98. (function($){
  99.     function isVisible(offset, offset2) {
  100.         var docViewTop = $(window).scrollTop();
  101.         var docViewBottom = docViewTop + $(window).height();
  102.        
  103.         return ((offset <= docViewBottom) && (offset + offset2 >= docViewTop));
  104.     }
  105.    
  106.     $(document).ready(function(){
  107.         var $header = $('#page-header-wrap');
  108.         var $footer = $('#footer-outer');
  109.  
  110.    
  111.         var $form = $('#sticky-form');
  112.        
  113.         function onScroll(){
  114.             if (isVisible($header.get(0).offsetTop + $header.get(0).offsetHeight, 0)) {
  115.                 //$form.hide();
  116.                 $form.slideUp();
  117.                     return;
  118.             }
  119.            
  120.             if (isVisible($footer.get(0).offsetTop, 0) || $footer.get(0).offsetTop <= window.pageYOffset) {
  121.                 //$form.hide();
  122.                 $form.slideUp();
  123.                     return;
  124.             }
  125.            
  126.             //$form.show();
  127.                 $form.slideDown();
  128.         }
  129.         onScroll();
  130.         $(document).scroll(onScroll);
  131.     });
  132. })(jQuery);
  133. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement