[Java教程]jQuery实现页面滚动时智能浮动定位

0 2016-08-04 18:00:08

jQuery实现页面滚动时层智能浮动定位_前端开发

* {

margin: 0;

padding: 0;

}

body {

font: 12px/1.8 Arial;

color: #666;

}

h1.tit-h1 {

font-size: 38px;

text-align: center;

margin: 30px 0 15px;

color: #f60;

}

.wrap {

border: 1px dashed #ccc;

background: #f8f8f8;

padding: 20px;

}

.demo {

height: 1500px;

}

.float {

width: 80px;

padding: 10px;

border: 1px solid #ffecb0;

background-color: #fffee0;

-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.2);

-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.2);

box-shadow: 1px 1px 2px rgba(0,0,0,.2);

position: absolute;

right: 10%;

top: 131px;

}

jQuery实现页面滚动时层智能浮动定位_前端开发

我在这里等你噢!

$.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.                            element.css({

position: "fixed",

top: 0

});

} else {

element.css({

top: scrolls

});

}

} else {

element.css({

position: pos,

top: top

});

}

});

};

return $(this).each(function () {

position($(this));

});

};

//绑定

$("#float").smartFloat();

java怎么往右浮动_[Java教程]jQuery实现页面滚动时智能浮动定位相关推荐

  1. 页面滚动时触发图片逐帧播放_如何在滚动效果上创建逐帧运动图像

    页面滚动时触发图片逐帧播放 A step by step guide on how to create that dynamic image background you see everywhere ...

  2. java 三级菜单栏的添加_[Java教程]jquery实现的三级导航菜单实例代码

    [Java教程]jquery实现的三级导航菜单实例代码 0 2016-01-02 15:00:02 jquery实现的三级导航菜单实例代码: 使用最多的可能是二级导航菜单,所以网上的代码一大堆,三级菜 ...

  3. java下拉框查询_[Java教程]jQuery实现联动下拉列表查询框

    [Java教程]jQuery实现联动下拉列表查询框 0 2015-12-07 18:00:04 厂商:请选择 品牌:请选择 型号:请选择 效果如下: 本文网址:http://www.shaoqun.c ...

  4. java 微信群发多图文_[Java教程]httpClient实现微信公众号消息群发

    [Java教程]httpClient实现微信公众号消息群发 0 2016-09-21 20:00:10 1.实现功能 向关注了微信公众号的微信用户群发消息.(可以是所有的用户,也可以是提供了微信ope ...

  5. java弹窗点击事件_[Java教程]jQuery的click事件在当前页弹出层窗口(不打开新页面)...

    [Java教程]jQuery的click事件在当前页弹出层窗口(不打开新页面) 0 2015-10-24 15:00:04 当给链接添加一个click事件,我们可能不希望Web浏览器按照其常规模式退出 ...

  6. java怎么指定父窗口大小_[Java教程]jQuery如何获取div距离窗口顶部或者父元素顶部的距离...

    [Java教程]jQuery如何获取div距离窗口顶部或者父元素顶部的距离 0 2016-01-03 11:00:19 jQuery如何获取div距离窗口顶部或者父元素顶部的距离: 在实际应用或许会需 ...

  7. java实现团购功能_[Java教程]jquery组件团购倒计时功能

    [Java教程]jquery组件团购倒计时功能 0 2014-05-12 12:00:04 本文网址:http://www.shaoqun.com/a/90954.html *特别声明:以上内容来自于 ...

  8. java提示框easyui风格_[Java教程]jQuery EasyUI 提示框(Messager)用法

    [Java教程]jQuery EasyUI 提示框(Messager)用法 0 2013-10-10 19:00:06 jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的 ...

  9. java类全路径简写_[JAVA] JAVA 类路径

    Java 类路径 类路径是所有包含类文件的路径的集合. 类路径中的目录和归档文件是搜寻类的起始点. 虚拟机搜寻类 搜寻jre/lib和jre/lib/ext目录中归档文件中所存放的系统类文件 搜寻再从 ...

最新文章

  1. 9 单元测试中不得不知的概念
  2. Bert 中文使用方式
  3. linux知识记录20192022
  4. 分组,命名分组,url的命名和反向解析
  5. 购物中心潮--我的创业之路
  6. 在Excel工作表区域内快速移动或滚动
  7. iPhone NavigationBar和UIToolbar基础
  8. 关于python最大递归深度 - 998
  9. Kubernetes API的版本控制,分组,对象,访问控制
  10. 模型预测控制路径跟踪python语言实现
  11. diffmerge对比时出现中文乱码的解决办法
  12. Premiere 音频视频基本设置
  13. c语言 愚人节题目,愚人节整人题目大全
  14. 中国重汽:香港上市在十月
  15. C语言关于排序的十一个函数
  16. 轮廓图编程-自定义QChartView
  17. 93.第十九章 MySQL数据库 -- MySQL安装和基本使用(三)
  18. 杂谈---令人抓狂的数据库行级锁问题
  19. 数据检索---ElasticSerach
  20. MongoDB开发基础

热门文章

  1. 看雪Unicorn高级逆向与反混淆学习笔记
  2. 今日arXiv精选 | 11篇ICCV 2021最新论文
  3. 2021年自然语言处理 (NLP) 算法学习路线!
  4. Hugging Face官方课程来了!Transformers库维护者之一授课,完全免费
  5. 迁移学习领域自适应:具有类间差异的联合概率最大平均差异
  6. 岗位推荐 | 腾讯AI Lab多媒体算法组招聘正式员工和实习生
  7. Github 最新 AI 开源项目了解一下?
  8. 算法竞赛入门与进阶 (二)单调队列、单调栈
  9. 【Java代码】未分页数据根据参数进行分页(粘贴可用)
  10. IntelliJ IDEA快捷键学习