蓝戒的博客


js页面滚动到一定位置时触发事件:隐藏、固定显示相互切换

页面滚动到一定位置时触发事件:隐藏、固定显示相互切换

js代码如下:

<script>
window.onload=function(){
var oFix=document.getElementById('fixed'); //获取dom节点

show();
window.onscroll=show;

function show(){
var scrollY=document.documentElement.scrollTop||document.body.scrollTop;

if(scrollY<150){
oFix.style.display='none';
}else{
oFix.style.display='block';
oFix.style.top=scrollY+'px';
}
}
}
</script>

html代码如下:

&lt;div id="<a>fixed</a>" style="<a>display:none;</a>"&gt;
        &lt;div class="<a>fix</a>"&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;strong&gt;HTML5 中的一些新特性&lt;/strong&gt;&lt;/li&gt;
                &lt;li&gt;简洁的DOCTYPE&lt;/li&gt;
                &lt;li&gt;简单易记的语言标签&lt;/li&gt;
                &lt;li&gt;简单易记的编码类型&lt;/li&gt;
                &lt;li&gt;不需要闭合标签&lt;/li&gt;
                &lt;li&gt;废弃的标签&lt;/li&gt;
                &lt;li&gt;更加语义化的新增标签&lt;/li&gt;
                &lt;li&gt;表单增强&lt;/li&gt;
                &lt;li&gt;视频和音频&lt;/li&gt;
                &lt;li&gt;基于JavaScript 的2D 绘画&lt;/li&gt;
            &lt;/ul&gt; 	
        &lt;/div&gt;
    &lt;/div&gt;

本文固定链接: http://www.webzsky.com/?p=117 | 蓝戒的博客

cywcd
该日志由 cywcd 于2013年10月09日发表在 javascript 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: js页面滚动到一定位置时触发事件:隐藏、固定显示相互切换 | 蓝戒的博客
关键字:

js页面滚动到一定位置时触发事件:隐藏、固定显示相互切换:等您坐沙发呢!

发表评论


快捷键:Ctrl+Enter
来自的朋友,欢迎您 点击这里 订阅我的博客 o(∩_∩)o~~~
×