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


Posted in Javascript onApril 20, 2020

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右侧广告跟随滚动,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
JavaScript indexOf方法入门实例(计算指定字符在字符串中首次出现的位置)
Oct 17 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
Oct 29 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
Angular-Ui-Router+ocLazyLoad动态加载脚本示例
Mar 02 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
Feb 01 Javascript
vue中设置height:100%无效的问题及解决方法
Jul 27 Javascript
vue中axios的二次封装实例讲解
Oct 14 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
Javascript如何实现扩充基本类型
Aug 26 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 Javascript
jQuery+PHP星级评分实现方法
Oct 02 #Javascript
谈谈JSON对象和字符串之间的相互转换JSON.stringify(obj)和JSON.parse(string)
Oct 01 #Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 #Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 #Javascript
JS处理json日期格式化问题
Oct 01 #Javascript
JS日期格式化之javascript Date format
Oct 01 #Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
Oct 01 #Javascript
You might like
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
JS常见问题整理(持续更新)
2013/08/06 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
详解JavaScript中数组和字符串的lastIndexOf()方法使用
2016/03/13 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
jQuery自定义图片上传插件实例代码
2017/04/04 jQuery
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
2017/06/29 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
浅谈vue项目可以从哪些方面进行优化
2018/05/05 Javascript
详解create-react-app 自定义 eslint 配置
2018/06/07 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
Element InfiniteScroll无限滚动的具体使用方法
2020/07/27 Javascript
[56:41]iG vs Winstrike 2018国际邀请赛小组赛BO2 第二场
2018/08/17 DOTA
Python的Django框架下管理站点的基本方法
2015/07/17 Python
浅谈Python爬取网页的编码处理
2016/11/04 Python
python中的break、continue、exit()、pass全面解析
2017/08/05 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python2.7实现FTP文件下载功能
2018/04/15 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
Form表单及django的form表单的补充
2019/07/25 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
pytorch 求网络模型参数实例
2019/12/30 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
伦敦眼门票在线预订:London Eye
2018/05/31 全球购物
Farfetch台湾官网:奢侈品牌时尚购物平台
2019/06/17 全球购物
写好自荐信的要点
2013/11/06 职场文书
仓库班组长岗位职责
2013/12/12 职场文书
业务部主管岗位职责
2014/01/29 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
安全教育主题班会教案
2015/08/12 职场文书
解析目标检测之IoU
2021/06/26 Python
MySQL数据库表约束讲解
2022/06/21 MySQL