JQuery实现网页右侧随动广告特效


Posted in Javascript onJanuary 17, 2016

方法一:

<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 
      }); 
    } 
  }); 
});

HTML

<div id="float" class="float"> 
<h3>推荐</h3> 
广告代码 
</div>

以上2种方法都可以实现页面右侧的随动广告特效,希望对大家能够有所帮助。

Javascript 相关文章推荐
jquery 实现密码框的显示与隐藏示例代码
Sep 18 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
浅谈Vue的基本应用
Dec 27 Javascript
js移动端图片压缩上传功能
Aug 18 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
解决vue中使用swiper插件问题及swiper在vue中的用法
Apr 04 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
详解Vue.js iview实现树形权限表(可扩展表)
Sep 30 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
原生js实现抽奖小游戏
Jun 27 Javascript
django js 实现表格动态标序号的实例代码
Jul 12 Javascript
vue props对象validator自定义函数实例
Nov 13 Javascript
Validform+layer实现漂亮的表单验证特效
Jan 17 #Javascript
javascript实现倒计时跳转页面
Jan 17 #Javascript
jQuery实现图片走马灯效果的原理分析
Jan 16 #Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 #Javascript
input点击后placeholder中的提示消息消失
Jan 15 #Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 #Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 #Javascript
You might like
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
PHP学习笔记之一
2011/01/17 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
PHP取整数函数常用的四种方法小结
2012/07/05 PHP
php中apc缓存使用示例
2013/12/25 PHP
php编程中echo用逗号和用点号连接的区别
2016/03/26 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
jQuery.holdReady()使用方法
2014/05/20 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
jquery实现表单输入时提示文字滑动向上效果
2015/08/10 Javascript
BootStrap下jQuery自动完成的样式调整
2016/05/30 Javascript
js中的面向对象入门
2017/03/06 Javascript
原生js实现吸顶效果
2017/03/13 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
基于BootStrap multiselect.js实现的下拉框联动效果
2017/07/28 Javascript
Angular 5.0 来了! 有这些大变化
2017/11/15 Javascript
VUE前后端学习tab写法实例
2019/08/06 Javascript
js实现漂亮的星空背景
2019/11/01 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
使用JavaScript实现贪吃蛇游戏
2020/09/29 Javascript
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
python中数组和矩阵乘法及使用总结(推荐)
2019/05/18 Python
pandas factorize实现将字符串特征转化为数字特征
2019/12/19 Python
如何基于Python实现自动扫雷
2020/01/06 Python
tensorflow指定GPU与动态分配GPU memory设置
2020/02/03 Python
python的dict判断key是否存在的方法
2020/12/09 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
微软中国官方旗舰店:销售Surface、Xbox One、笔记本电脑、Office
2018/07/23 全球购物
PHP如何对用户密码进行加密
2014/07/31 面试题
Weblogic和WebSphere不同特点
2012/05/09 面试题
安全资金保障制度
2014/01/23 职场文书
纪检干部现实表现材料
2014/08/21 职场文书