jQuery网页右侧广告跟随滚动代码分享_jquery

两种方法都分享给大家，希望对大家的学习有所启发。

方法一：

<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>

方法二：

/*页面智能层浮动*/
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>

以上就是jQuery网页右侧广告跟随滚动，仿wordpress右侧广告跟随滚动，希望对大家的学习有所帮助。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jQuery跟随滚动条
， jQuery右侧悬浮
jQuery网页滚动
网页右侧跟随滚动广告、jquery导航栏跟随滚动、jquery侧边栏跟随滚动、jquery 跟随页面滚动、jquery div跟随滚动条，以便于您获取更多的相关知识。