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 相关文章推荐
js制作的鼠标悬浮时产生的下拉框效果
Oct 27 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
Jun 27 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
jquery判断输入密码两次是否相等
Apr 22 Javascript
Javascript基础教程之比较null和undefined值
May 16 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
Jan 23 Javascript
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
vue脚手架搭建项目的兼容性配置详解
Jul 17 Javascript
Vue父子组件之间的通信实例详解
Sep 28 Javascript
jquery简单实现纵向的无缝滚动代码实例
Apr 01 jQuery
JavaScript字符和ASCII实现互相转换
Jun 03 Javascript
微信小程序实现音乐播放页面布局
Dec 11 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
MySQL授权问题总结
2007/05/06 PHP
PHP数组及条件,循环语句学习
2012/11/11 PHP
解析mysql left( right ) join使用on与where筛选的差异
2013/06/18 PHP
php异步多线程swoole用法实例
2014/11/14 PHP
php隐藏IP地址后两位显示为星号的方法
2014/11/21 PHP
mapper--图片热点区域高亮组件官方站点
2007/12/22 Javascript
js 判断脚本加载完毕的代码
2011/07/13 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
三种方式获取XMLHttpRequest对象
2014/04/21 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
浅谈 javascript 事件处理
2015/01/04 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
javascript事件模型介绍
2016/05/31 Javascript
js生成随机数(指定范围)的实例代码
2016/07/10 Javascript
Vuejs第十三篇之组件——杂项
2016/09/09 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
使用live-server快速搭建本地服务器+自动刷新的方法
2018/03/09 Javascript
vue3.0 CLI - 2.5 - 了解组件的三维
2018/09/14 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
2018/10/08 Javascript
详解几十行代码实现一个vue的状态管理
2019/01/28 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
python读取目录下最新的文件夹方法
2018/12/24 Python
Python程序打包工具py2exe和PyInstaller详解
2019/06/28 Python
python从zip中删除指定后缀文件(推荐)
2019/12/05 Python
详解python实现可视化的MD5、sha256哈希加密小工具
2020/09/14 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
美国学校用品、教室和教学商店:Discount School Supply
2018/04/04 全球购物
俄罗斯药房连锁店:ASNA
2020/06/20 全球购物
《阳光》教学反思
2014/02/23 职场文书
女生节标语
2014/06/26 职场文书
休学证明范本
2015/06/19 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python
CSS中float高度塌陷问题的四种解决方案
2022/04/18 HTML / CSS
netty 实现tomcat的示例代码
2022/06/05 Servers