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>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持小牛知识库！
-
本文向大家介绍jQuery实现浮动层随浏览器滚动条滚动的方法，包括了jQuery实现浮动层随浏览器滚动条滚动的方法的使用技巧和注意事项，需要的朋友参考一下 本文实例讲述了jQuery实现浮动层随浏览器滚动条滚动的方法。分享给大家供大家参考。具体如下： 这是jQuery实现的一个浮动层效果，随浏览器滚动条而滚动，并一直保持在顶部位置，请使用火狐测试，IE下表现不尽理想。 运行效果截图如下： 在线演示
-
问题内容： 我已经尝试过使用dynamic.js和下面的代码，但是，当我在IE11中尝试此操作时，每次滚动时它都会一直跳到顶部： 我想使页面在平板电脑，IE10和11上可滚动，以便用户可以像在移动设备上一样向上推动页面以向下滚动。 如何在不跳到顶部的情况下在纯JS或jQuery中做到这一点？ 问题答案： 您可以通过记录单击时鼠标的位置以及被拖动时的当前位置来非常简单地完成此操作。尝试这个： 为了防
-
问题内容： 我正在尝试在网络上进行搜索，但不确定要查找的内容是什么。我试图找出如何创建将被修复的div元素，或者仅在该元素的TOP达到窗口浏览器视图的TOP时才浮动。例如，如果某个元素位于页面的中间，那么当您继续向下滚动时，该元素将一直保留直到它即将消失，然后它才希望保留在我的浏览器顶部（固定）。 问题答案： 我想我正在做与您想做的事情类似的事情。试用以下代码，将所需的内容放入通知div中，并单独
-
本文向大家介绍jQuery 顶部导航跟随滚动条滚动固定浮动在顶部，包括了jQuery 顶部导航跟随滚动条滚动固定浮动在顶部的使用技巧和注意事项，需要的朋友参考一下
-
本文向大家介绍jQuery实现滚动条滚动到子元素位置（方便定位），包括了jQuery实现滚动条滚动到子元素位置（方便定位）的使用技巧和注意事项，需要的朋友参考一下 话不多说，请看代码： jQuery: 以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持呐喊教程！
-
如何控制滚动条滚动到指定位置后，整体固定，滚动条控制某一元素移动，元素移动完成后整体才可以继续往下滑，求求大佬们指点!!!o(╥﹏╥)o