jQuery实现页面滚动时智能浮动定位
更新时间：2017年01月08日 14:43:13 作者：Mr.Bruce
本文主要介绍了jQuery实现页面滚动时智能浮动定位的方法。附上完整代码，具有一定的参考价值，下面跟着小编一起来看下吧
话不多说，请看代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现页面滚动时层智能浮动定位_前端开发</title>
<style type="text/css">
* {
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;
}
</style>
<script type="text/javascript" src="../..content/js/jquery-1.4.4.min.js"></script>
</head>
<body>
<h1 class="tit-h1">jQuery实现页面滚动时层智能浮动定位_前端开发</h1>
<div class="wrap">
<div class="demo"></div>
<div class="float" id="float">我在这里等你噢！</div>
</div>
<script type="text/javascript">
$.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: 0
});
} else {
element.css({
top: scrolls
});
}
} else {
element.css({
position: pos,
top: top
});
}
});
};
return $(this).each(function () {
position($(this));
});
};
//绑定
$("#float").smartFloat();
</script>
</div>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-20541395-2']);
_gaq.push(['_trackPageview']);
(function () {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
相关文章
jQuery1.6中新添加了一个prop方法，看起来和用起来都和attr方法一样，这两个方法有什么区别呢？这要从HTMl 的attribute与property区别说起，attr与prop正是这两个东西的缩写2013-10-10
这篇文章主要介绍了jQuery解析XML文件同时动态增加js文件的方法,涉及jQuery Ajax调用及返回函数中增加js文件的相关使用技巧,需要的朋友可以参考下2015-06-06
jQuery插件ajaxFileUpload实现异步上传文件效果
jQuery插件AjaxFileUpload用来实现ajax文件上传，该插件使用非常简单，接下来我们来看下用AjaxFileUpload插件实现文件上传的方法，有需要的小伙伴可以参考下2015-04-04
这篇文章主要介绍了jQuery中:nth-child选择器用法,实例分析了:nth-child选择器功能、定义及匹配子元素或奇偶元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2014-12-12
下面小编就为大家带来一篇jquery动态添加文本并获取值的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
关于jquery input textare 事件绑定及用法学习
目前1.7以上，jquery的事件绑定已经用on替换了原来的bind，接下来为大家介绍下bind的使用方法及input textare事件，感兴趣的朋友可以参考下哈2013-04-04
原生js实现addclass,removeclass,toggleclasss实例
下面小编就为大家带来一篇原生js实现addclass,removeclass,toggleclasss实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起 小编过来看看吧2016-11-11
本节主要介绍了jquery实现类似淘宝星星评分功能，经测试效果相当不错，有图有真相，喜欢的朋友可以参考下2014-09-09
点击左右按钮图片横向滚动jquery，一次滚动四个，图片滚动完成，自动回到第一个版面，效果相当不错，感兴趣的前端工程师们可以参考下2013-04-04
本篇文章主要介绍了jquery easyui如何实现格式化列 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-07-07
最新评论