Home > Web Front-end > JS Tutorial > jQuery web page right ad follows scrolling code sharing_jquery

jQuery web page right ad follows scrolling code sharing_jquery

WBOY
Release: 2016-05-16 15:37:35
Original
1903 people have browsed it

Both methods are shared with everyone, hoping to inspire everyone's learning.

Method 1:

<script type="text/javascript">// <![CDATA[ 
$.fn.smartFloat = function() { 
  var position = function(element) { 
    var top = element.position().top, pos = element.css("position"); 
    $(window).scroll(function() { 
      var scrolls = $(this).scrollTop(); 
      if (scrolls > top) { 
        if (window.XMLHttpRequest) { 
          element.css({ 
            position: "fixed", 
            top: "10px" 
          }); 
        } else { 
          element.css({ 
            top: scrolls 
          }); 
        } 
      }else { 
        element.css({ 
          position: pos, 
          top: top 
        }); 
      } 
    }); 
  }; 
  return $(this).each(function() { 
    position($(this)); 
  }); 
}; 
 
//绑定 
$("#float").smartFloat(); 
// ]]></script> 
Copy after login

Method 2:

/*页面智能层浮动*/ 
jQuery(document).ready(function($){ 
  var $sidebar = $(".float"), 
  $window = $(window), 
  offset = $sidebar.offset(), 
  topPadding = 20; 
  $window.scroll(function() { 
    if ($window.scrollTop() > offset.top) { 
      $sidebar.stop().animate({ 
        marginTop: $window.scrollTop() - offset.top + topPadding 
      }); 
    } else { 
      $sidebar.stop().animate({ 
        marginTop: 0 
      }); 
    } 
  }); 
}); 
<div id="float" class="float"> 
<h3>博主推荐</h3> 
广告代码 
</div>
Copy after login

The above is how the ads on the right side of the jQuery web page follow the scrolling, imitating the ads on the right side of the WordPress page that follow the scrolling. I hope it will be helpful to everyone's learning.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template