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

 更新时间:2020年04月20日 17:04:24   投稿:lijiao  
这篇文章主要介绍了两种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+PHP实现可编辑表格字段内容并实时保存

    jQuery+PHP实现可编辑表格字段内容并实时保存

    在本例中,我们会通过jQuery实现单击将一个文本信息变为可编辑的表单,你可以对文本内容进行编辑,然后点击“确定”按钮,新的内容将发送到后台PHP程序处理,并保存到数据库;当点击“取消”按钮,则页面恢复到初始状态,需要的朋友可以参考下
    2015-10-10
  • jquery mobile 移动web(5)

    jquery mobile 移动web(5)

    这篇文章主要介绍了jquery mobile 移动web(5)的相关资料,需要的朋友可以参考下
    2015-12-12
  • jQuery基于Ajax方式提交表单功能示例

    jQuery基于Ajax方式提交表单功能示例

    这篇文章主要介绍了jQuery基于Ajax方式提交表单功能,结合实例形式分析了jQuery使用ajax方式提交表单的具体步骤与常见操作技巧,需要的朋友可以参考下
    2017-02-02
  • jQuery超简单选项卡完整实例

    jQuery超简单选项卡完整实例

    这篇文章主要介绍了jQuery超简单选项卡实现方法,以一个完整实例形式较为详细的分析了jQuery实现选项卡切换功能的相关技巧,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • 15款优秀的jQuery导航菜单插件分享

    15款优秀的jQuery导航菜单插件分享

    这篇文章收集了15款优秀的jQuery导航菜单插件分享给大家。jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,jQuery 让网站有更好的可用性和用户体验,给访问者对网站留下非常好的印象。
    2011-07-07
  • jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

    jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例

    这篇文章主要介绍了jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用,结合实例形式较为详细的分析了jQuery事件绑定、解绑、事件冒泡、阻止冒泡等相关原理与应用技巧,需要的朋友可以参考下
    2019-05-05
  • JQ选择器_选择同类元素的第N个子元素的实现方法

    JQ选择器_选择同类元素的第N个子元素的实现方法

    下面小编就为大家带来一篇JQ选择器_选择同类元素的第N个子元素的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-09-09
  • jquery表单验证框架提供的身份证验证方法(示例代码)

    jquery表单验证框架提供的身份证验证方法(示例代码)

    本篇文章主要介绍了jquery表单验证框架提供的身份证验证方法的示例代码。需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 3Z版基于jquery的图片复选框(asp.net+jquery)

    3Z版基于jquery的图片复选框(asp.net+jquery)

    最近在做一个彩票缩水工具,找了几个图片复选框插件始终感觉不太满意,自己动手山寨了一下imageTick插件.
    2010-04-04
  • jQuery搜索框效果实现代码(百度关键词联想)

    jQuery搜索框效果实现代码(百度关键词联想)

    这篇文章主要介绍了jQuery搜索框效果实现代码,百度关键词联想,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08

最新评论