-
这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE、Firefox、Chrome下都能正常工作。
使用这个特效代码需要注意,如果在侧边栏使用,则需要注意,侧栏中的栏目不能使用JavaScript动态加载,必须用静态的格式,否则在JavaScript会错误的计算页面高度,上下滚动的时候会出现错位现象。
JavaScript代码:
方法一:
123456789101112131415(
function
(){
var
oDiv=document.getElementById(
"float"
);
var
H=0,iE6;
var
Y=oDiv;
while
(Y){H+=Y.offsetTop;Y=Y.offsetParent};
iE6=window.ActiveXObject&&!window.XMLHttpRequest;
if
(!iE6){
window.onscroll=
function
()
{
var
s=document.body.scrollTop||document.documentElement.scrollTop;
if
(s>H){oDiv.className=
"div1 div2"
;
if
(iE6){oDiv.style.top=(s-H)+
"px"
;}}
else
{oDiv.className=
"div1"
;}
};
}
})();
方法二:HTML代码:
12345<
div
id
=
"box"
>
<
div
id
=
"float"
class
=
"div1"
>
//随滚动移动的部分代码
</
div
>
</
div
>
CSS代码:
123#box{
float
:
left
;
position
:
relative
;
width
:
295px
;}
.div
1
{}
.div
2
{
position
:
fixed
;
_position
:
absolute
;
top
:
3px
;
z-index
:
295
;}
希望本文所述对大家JavaScript程序设计有所帮助。
来源:酷米社区(关注电脑技术和资源分享的博客)转载请保留此处和链接!
地址:http://www.kumi6.com/?id=123
JS实现部分HTML固定页面顶部随屏滚动效果
692人参与 |分类: 网页代码|时间:2019年03月28日 09:11
相关文章阅读更多:代码 窗口固定
- 2020-02-25鼠标点击显示 爱心JS代码
- 2019-12-29jQuery高级在线配色器插件
- 2019-11-24图片无限滚动代码
- 2019-04-06HTML超级搜索网站源码下载|淘宝客搜索引擎源码(调用淘宝特卖)
- 2019-04-06淘宝搜索框代码
- 2019-04-04网站代码怎么看?找某某视频的源地址?基础知识
- 2019-04-04分享10种常见的网页编程.js代码,可以直接在自己网页中用
- 2019-04-04空调显示的这些代码,是什么意思?
- 2019-03-17查找php配置文件php.ini所在路径的二种方法
- 2019-03-12常见网站底部友情链接代码示例
发表评论酷米社区