作者： admin

jquery可以用很少的代码实现不错的效果，同时也为了各种浏览器的兼容性。现在可以实现在目前最低版本的IE6指定区域内固定悬浮的效果。

文件下载
具体可以参考：http://kitchen.net-perspective.com/open-source/scroll-follow/

单纯的使用jQuery的scrollTop相关的对象来获取值是不兼容的。

scrollTop的兼容性问题

Element.scrollTop 不是 W3C 规范的标准属性，最初被 IE 的 DHTML Object Model 引入，但已被目前各主流浏览器所支持。更多参见 MSDN：scrollTop Property。
Element.scrollTop 属性获取或者设置一个元素的内容已经滚动到其上边界的像素数。只有在元素具备垂直滚动条的时候此属性才有效。
而无论是 MSDN 还是 Mozilla Developer Center，均没有明确提及对于页面（即视口元素）的滚动条，其垂直与水平的位置需要通过哪一个 DOM 对象获取。
分析以下代码：

[code]<script>

[/code]

当浏览器窗口滚动的时候，会在左上角显示出 scrollTop的值。
在Opera，IE，Firefox，Chrome和Safari中测试的汇总表：
[img=https://lh4.googleusercontent.com/NltRxPVtK45Y2JafkjUzX3QqAxZ-c-EWyvRNGTM_clcGdFnui4hoRjxTIsgkyM-sqEHI_G_X4_a2noFRBJ5fj24Sz3sO4FIXd6qjxbX3TUymujk-][/img]
可见，scrollTop可以从document.body和 document.documentElement中获取。
在混杂模式下，所有浏览器均使用 document.body.scrollTop 获取页面的垂直滚动条的位置。所以，在混杂模式下不会出现兼容性问题。
而在标准模式下，Chrome 与 Safari 仍然使用 document.body.scrollTop，同时document.documentElement.scrollTop 的返回为 0。这时如果仅仅使用document.documentElement.scrollTop 获取页面垂直滚动条顶端位置，在 Chrome 和 Safari 中就会因为永久返回 0 导致页面功能异常（如，绝对定位的元素不能随页面的滚动条而滚动或位置有误）。

解决方式

所以，在获取这个值的时候，可以采用以下方法避免兼容性问题：

[code]var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;[/code]

另外，scrollLeft的情况跟scrollTop类似，有兴趣的童鞋可以研究研究。

引申阅读：

后来请较了一位朋友，把源码给挖出来了。
我们通过 WebKit 内核与 Gecko 内核的源代码中也可以看出 Chrome、Safari 与 Firefox 对页面的 scrollTop、scrollTop 获取方式的不同：
WebKit 内核：/WebCore/html/HTMLBodyElement.cpp

C/C++ code

[code]int HTMLBodyElement::scrollTop() const
{
// Update the document’s layout.
Document* doc = document();
doc->updateLayoutIgnorePendingStylesheets();
FrameView* view = doc->view();
return view ? adjustForZoom(view->scrollY(), view) : 0;
}
int HTMLBodyElement::scrollLeft() const
{
// Update the document’s layout.
Document* doc = document();
doc->updateLayoutIgnorePendingStylesheets();
FrameView* view = doc->view();
return view ? adjustForZoom(view->scrollX(), view) : 0;
}[/code]

Gecko 内核：/content/base/src/nsGenericElement.cpp
C/C++ code

[code]nsNSElementTearoff::GetScrollInfo(nsIScrollableView **aScrollableView, nsIFrame **aFrame)
{
…
if ((quirksMode && mContent->NodeInfo()->Equals(nsGkAtoms::body)) ||
(!quirksMode && mContent->NodeInfo()->Equals(nsGkAtoms::html))) {
// In quirks mode, the scroll info for the body element should map to the
// scroll info for the nearest scrollable frame above the body element
// (i.e. the root scrollable frame). This is what IE6 does in quirks
// mode. In strict mode the root scrollable frame corresponds to the
// html element in IE6, so we map the scroll info for the html element to
// the root scrollable frame.
do {
frame = frame->GetParent();
if (!frame) {
break;
}
scrollFrame = do_QueryFrame(frame);
}
…
}[/code]
Firefox 的 Gecko 内核源代码中通过对文档模式的判断决定通过哪个对象获取和设置 scrollTop、scrollLeft 属性。从注释中可以看到，Firefox 这么做是为了兼容 IE6 的标准模式与混杂模式对 scrollTop、scrollLeft 的处理。

而 WebKit 内核则没有针对文档模式进行判断，对页面滚动条信息通过 [Object HTMLBodyElement] 对象获取与设置。
http://bbs.csdn.net/topics/340198399

现在上网的jquery效果都有现成的可以自己调用就可以使用了，但是推荐如果一些简单的效果还是尽量自己写比较好，这里讲解下一些对于新手如果实现jquery的自动滚动效果。

首先，我们的html要写成这样：

[code]<div id=”slide”>
<ul class=”slideul1″>
<li class=”slideli1″>
<ul class=”slideul2″>
<li><img src=”images/1.jpg”/></li>
<li><img src=”images/2.jpg”/></li>
<li><img src=”images/3.jpg”/></li>
<li><img src=”images/4.jpg”/></li>
<li><img src=”images/5.jpg”/></li>
</ul>
</li>
<li class=”slideli2″></li>
</ul>
</div>
<span></span>[/code]

js代码写成：

[code]<script type=”text/javascript”>
var _speed=10; //控制速度
var _slide = $(“#slide”);
var _slideli1 = $(“.slideli1”);
var _slideli2 = $(“.slideli2”);
$(“.slideli2”).html($(“.slideli1”).html());

 

function Marquee(){
if($(“#slide”).scrollLeft() > $(“.slideli1”).width()) <!– 当#slide水平滚动轴的值大于.slideli1宽度是1500的时候 –>
$(“#slide”).scrollLeft(0); <!– 当#slide水平滚动轴的值重新回到0 –>
else{
$(“#slide”).scrollLeft($(“#slide”).scrollLeft()+1); <!– 自增加1–>
}
}

$(function(){
//两秒后调用
var set = setInterval(Marquee,_speed);
$(“#slide”).hover(function() {
//鼠标移动DIV上停止
clearInterval(set);
},function(){
//离开继续调用
set = setInterval(Marquee,_speed);
});
});

$(function(){
$(“#slide”).scroll(function(){
$(‘span’).text($(“#slide”).scrollLeft());
});
})
</script>[/code]
最后是样式，因为样式不是我们重点讲的所以放在最后面，但这里也要注意一个属性的设置：

[code]*{ 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;}
.go-back{ text-align:center; border-top:1px dashed #ccc; padding:10px; margin-top:20px; font-size:40px;}
.wrap{border:1px dashed #ccc; background:#f8f8f8; padding:20px;}
#slide{width:900px;margin:100px auto; overflow:scroll;} /*为了方便查看 这里的 overflow属性改为scroll，如果改成hidden就是最终效果*/
ul{list-style:none;}
li{float:left;}
.slideul1{width:3999px;}[/code]
首先是分析一下html代码记住他的结构，主要是由ul 和 li组成。

js代码部分才是重点分析的，其实前面的3行代码要不要都无所谓可以把，

[code]var _speed=10;
var _slide = $(“#slide”);
var _slideli1 = $(“.slideli1”);
var _slideli2 = $(“.slideli2”);[/code]
删除，这里写其实就是为了以后修改的方便而已如果觉得以后会修改就保留吧。

[code]$(“.slideli2”).html($(“.slideli1″).html());[/code]
这里代码其实就是把<li class=”slideli1″></li>里面的html代码复制到

<li class=”slideli2”></li>里面去，这么做其实就是为了滚动效果流畅，如果看不错的话可以把这段代码删除就知道为什么这么写了。

[code]function Marquee(){
if($(“#slide”).scrollLeft() > $(“.slideli1”).width()) <!– 当#slide水平滚动轴的值大于.slideli1宽度是1500的时候 –>
$(“#slide”).scrollLeft(0); <!– 当#slide水平滚动轴的值重新回到0 –>
else{
$(“#slide”).scrollLeft($(“#slide”).scrollLeft()+1); <!– 自增加1–>
}
}[/code]
这里是一个滚动循环的函数。

意思就是#slide的水平滚动值如果大于.slideli1宽度的时候，水平滚动轴就返回初始位置，否则#slide的水平滚动值就不断的自增1，来达到滚动的效果。（其实经过测试.slideli1宽度是1500）。

[code]$(function(){
//两秒后调用
var set = setInterval(Marquee,_speed);
$(“#slide”).hover(function() {
//鼠标移动DIV上停止
clearInterval(set);
},function(){
//离开继续调用
set = setInterval(Marquee,_speed);
});
});[/code]
这里的效果是鼠标移动到图层时停止当前的滚动，但是继续保留在之前滚动的位置，鼠标移除后就继续在当前停留的位置后续滚动的效果。
[code]$(function(){
$(“#slide”).scroll(function(){
$(‘span’).text($(“#slide”).scrollLeft());
});
})[/code]

这里其实就是为了更好的看到#slide的水平滚动值的变化做的。

源文件下载

在使用jquery制作移动特效的时候，如果反复的触发移动事件我们会发现既是我们立刻停止了事件的触发，但之前的触发事件的效果还在继续追加。

其实我们要用到一句话来判断当前是否还在进行着动画，

[code]if(!移动对象.is(‘:animated’)){

}[/code]
对于一些人可能理解需要一点时间，这里一起来分析一下。
判断的条件前面加了感叹号!表示否的意思，意思就是如果当前没有动画就满足条件执行里面的代码；如果当动画在进行时，还在继续触发事件的话就不满足条件跳出代码，说白了就是要一个触发事件一个动画慢慢来别急的意思。