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 相关文章推荐
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
实例说明为什么不要行内使用javascript
Apr 18 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
js判断是否为空和typeof的用法(详解)
Oct 07 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
Node.js websocket使用socket.io库实现实时聊天室
Feb 20 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
简单谈谈原生js的math对象
Jun 27 Javascript
node使用UEditor富文本编辑器的方法实例
Jul 11 Javascript
老生常谈ES6中的类
Jul 31 Javascript
layui table 参数设置方法
Aug 14 Javascript
vue+php实现的微博留言功能示例
Mar 16 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
天津市收音机工业发展史
2021/03/04 无线电
PHP中source #N问题的解决方法
2014/01/27 PHP
php实现多维数组中每个单元值(数字)翻倍的方法
2015/02/16 PHP
php实现Mysql简易操作类
2015/10/11 PHP
Yii rules常用规则示例
2016/03/15 PHP
IIS 7.5 asp Session超时时间设置方法
2017/04/17 PHP
PHP微信公众号开发之微信红包实现方法分析
2017/07/14 PHP
php面向对象程序设计中self与static的区别分析
2019/05/21 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
js阻止冒泡及jquery阻止事件冒泡示例介绍
2013/11/19 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
js制作可以延时消失的菜单
2017/01/13 Javascript
AngularJS实现路由实例
2017/02/12 Javascript
requirejs按需加载angularjs文件实例
2017/06/08 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
详解用Node.js实现Restful风格webservice
2017/09/29 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
详解Vscode中使用Eslint终极配置大全
2019/11/08 Javascript
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
pycharm内无法import已安装的模块问题解决
2020/02/12 Python
Python 解析xml文件的示例
2020/09/29 Python
python实现简单的井字棋游戏(gui界面)
2021/01/22 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
Nip + Fab官网:英国美容品牌
2019/08/26 全球购物
售后主管岗位职责
2013/12/08 职场文书
市场营销工作计划书
2014/05/06 职场文书
团队口号大全
2014/06/06 职场文书
教师四风对照检查材料思想汇报
2014/09/17 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
利用html+css实现菜单栏缓慢下拉效果的示例代码
2021/03/30 HTML / CSS
教你怎么用python爬取爱奇艺热门电影
2021/05/20 Python
js不常见操作运算符总结
2021/11/20 Javascript