JQuery实现的页面滚动时浮动窗口控件:ScrollFollow
JQuery实现的页面滚动时浮动窗口控件:Scroll Follow关键字词：Jquery Scrolling --Scroll Follow，浮动窗口控件，JQuery右侧跟随，JS右侧跟随
说起jquery的随窗口滚动的插件到是也不在少数，而且代码也不是那么复杂（对懂代码的人来说）。大部分的功能都是滚动到特定内容时，特定内容离顶端一定距离保持固定，功能上比较单一，有发现更好的滚动效果。
前一段时间看一淘网时发现侧边的导航的滚动效果很不错，除具有上面的效果外当接近页面底部某个特定版块又随页面一起滚动的特效，但这代码是用kissy写的不是jquery。如果是懂js的朋友我想写起来应该也不难，但咱不是啊，只能网上找了。
功夫不负有心人啊，终于发现了一个类似的效果，果断保存了下来。分享给大家，并自己稍作修改。朋友们如果发现有更好的可以留言分享下。
代码说明：
1、引入Scroll Follow插件
2、 $("#sidebar ul").scrollFollow({ //要滚动的元素
bottomObj: '#footer',//底部元素
marginTop: 8,//距离顶端距离
marginBottom: 0//距离底部元素距离
})
以下为案例详情：
scrollFollow.js：
$.fn.extend({
scrollFollow: function(d) {
d = d || {};
d.container = d.container || $(this).parent();
d.bottomObj = d.bottomObj || '';
d.bottomMargin = d.bottomMargin || 0;
d.marginTop = d.marginTop || 0;
d.marginBottom = d.marginBottom || 0;
d.zindex = d.zindex || 9999;
var e = $(window);
var f = $(this);
if (f.length <= 0) {
return false
}
var g = f.position().top;
var h = d.container.height();
var i = f.css("position");
if (d.bottomObj == '' || $(d.bottomObj).length <= 0) {
var j = false
} else {
var j = true
}
e.scroll(function(a) {
var b = f.height();
if (f.css("position") == i) {
g = f.position().top
}
scrollTop = e.scrollTop();
topPosition = Math.max(0, g - scrollTop);
if (j == true) {
var c = $(d.bottomObj).position().top - d.marginBottom - d.marginTop;
topPosition = Math.min(topPosition, (c - scrollTop) - b)
}
if (scrollTop > g) {
if (j == true && (g + b > c)) {
f.css({
position: i,
top: g
})
} else {
if (window.XMLHttpRequest) {
f.css({
position: "fixed",
top: topPosition + d.marginTop,
'z-index': d.zindex
})
} else {
f.css({
position: "absolute",
top: scrollTop + topPosition + d.marginTop + 'px',
'z-index': d.zindex
})
}
}
} else {
f.css({
position: i,
top: g
})
}
});
return this
}
});
DEMO页面代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
* { margin: 0; padding: 0; }
body { font: 14px/1.4 Georgia, serif; background:#F2F2F2;}
#page-wrap { width: 600px; margin:15px auto; }
#header{padding:30px 0;border-bottom:2px solid #F27B03;}
p { margin: 0 0 15px 0; font:400 14px/25px "Arial";}
#main {padding:20px 20px 20px 0;width: 380px; float: left; }
#sidebar { width: 200px; float: right;}
#sidebar ul {border-left:1px solid #D5D5D5;padding-left:15px;}
#sidebar ul li {line-height:30px;margin: 0 0 0 20px; }
#footer{clear:both;border-top:2px solid #D5D5D5;padding:10px 0;}
</style>
</head>
<body>
<div id="page-wrap">
<div id="header">
<h1>Jquery Scrolling --Scroll Follow</h1>
<p>By <a href=""><strong>wmtimes</strong></a></p>
</div>
<div id="container">
<div id="main">
<h3>Scroll down and watch the sidebar on the right follow.</h3>
<p>Opera mini and IE below version 10 don’t support any flexbox syntax. However, you can use the Flexie polyfill to add support for IE. Flexie uses the old flexbox syntax, but it does support IE as far back as version 6. Flexbox deserves its own article to be explained in detail, so I’ll point you to some articles I’ve written showing the old syntax and the new syntax, as well as one that walks you through the new syntax to set up a responsive layout that overcomes the issue of source order.Opera mini and IE below version 10 don’t support any flexbox syntax. However, you can use the Flexie polyfill to add support for IE. Flexie uses the old flexbox syntax, but it does support IE as far back as version 6. Flexbox deserves its own article to be explained in detail, so I’ll point you to some articles I’ve written showing the old syntax and the new syntax, as well as one that walks you through the new syntax to set up a responsive layout that overcomes the issue of source order.</p>
<p>Opera mini and IE below version 10 don’t support any flexbox syntax. However, you can use the Flexie polyfill to add support for IE. Flexie uses the old flexbox syntax, but it does support IE as far back as version 6. Flexbox deserves its own article to be explained in detail, so I’ll point you to some articles I’ve written showing the old syntax and the new syntax, as well as one that walks you through the new syntax to set up a responsive layout that overcomes the issue of source order.Opera mini and IE below version 10 don’t support any flexbox syntax. However, you can use the Flexie polyfill to add support for IE. Flexie uses the old flexbox syntax, but it does support IE as far back as version 6. Flexbox deserves its own article to be explained in detail, so I’ll point you to some articles I’ve written showing the old syntax and the new syntax, as well as one that walks you through the new syntax to set up a responsive layout that overcomes the issue of source order.</p>
<p>Suffice it to say that with a single CSS property, we can essentially tell our documents to display blocks of content in a different order than how the source code orders the blocks in the HTML. Jordan Moore has also written about flexbox and content choreography, and he’s created a demo to illustrate.</p>
</div>
<div id="sidebar">
<ul>
<li><a href="index.html">jQuery (animated)</a></li>
<li><a href="css.html">CSS (fixed)</a></li>
<li><a href="reveal.html">CSS (reveal)</a></li>
<li><a href="index.html">jQuery (animated)</a></li>
<li><a href="css.html">CSS (fixed)</a></li>
<li><a href="reveal.html">CSS (reveal)</a></li>
<li><a href="index.html">jQuery (animated)</a></li>
<li><a href="css.html">CSS (fixed)</a></li>
<li><a href="reveal.html">CSS (reveal)</a></li>
<li><a href="index.html">jQuery (animated)</a></li>
<li><a href="css.html">CSS (fixed)</a></li>
<li><a href="reveal.html">CSS (reveal)</a></li>
<li><a href="index.html">jQuery (animated)</a></li>
<li><a href="css.html">CSS (fixed)</a></li>
<li><a href="reveal.html">CSS (reveal)</a></li>
<li><a href="css.html">CSS (fixed)</a></li>
<li><a href="reveal.html">CSS (reveal)</a></li>
<li><a href="index.html">jQuery (animated)</a></li>
<li><a href="css.html">CSS (fixed)</a></li>
<li><a href="reveal.html">CSS (reveal)</a></li>
</ul>
</div>
</div>
<div id="footer">
<p>Other elements in the first column may relocate themselves to fill the now vacated space, but elements in the second column won’t. Even positioned elements are positioned relative to some parent, although that parent might be the html element itself. When you absolutely position an element and move it somewhere on the screen, other elements won’t get out of the way. We need them to get out of the way, though, if we’re going to intermix page elements.Other elements in the first column may relocate themselves to fill the now vacated space, but elements in the second column won’t. Even positioned elements are positioned relative to some parent, although that parent might be the html element itself. When you absolutely position an element and move it somewhere on the screen, other elements won’t get out of the way. We need them to get out of the way, though, if we’re going to intermix page elements.</p>
<p>Other elements in the first column may relocate themselves to fill the now vacated space, but elements in the second column won’t. Even positioned elements are positioned relative to some parent, although that parent might be the html element itself. When you absolutely position an element and move it somewhere on the screen, other elements won’t get out of the way. We need them to get out of the way, though, if we’re going to intermix page elements.Other elements in the first column may relocate themselves to fill the now vacated space, but elements in the second column won’t. Even positioned elements are positioned relative to some parent, although that parent might be the html element itself. When you absolutely position an element and move it somewhere on the screen, other elements won’t get out of the way. We need them to get out of the way, though, if we’re going to intermix page elements.</p>
</div>
</div>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="scrollFollow.js"></script>
<script>
$(document).ready(function() {
$("#sidebar ul").scrollFollow({
bottomObj: '#footer',
marginTop: 8,
marginBottom: 0
})
});
</script>
</body>
</html>
DEMO下载：
页:
[1]