我想实现打开页面时隐藏顶部那个层， 滚动条下拉几百距离时就出现隐藏的层 当滚动条到顶部时又隐藏
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了我想实现打开页面时隐藏顶部那个层， 滚动条下拉几百距离时就出现隐藏的层 当滚动条到顶部时又隐藏相关的知识，希望对你有一定的参考价值。
源码谢谢。我知道是用SCROLLTOP 但我不知道怎么写。我是新手
能让隐藏层滚动时 有收缩的功能吗？
出现时慢慢的出现，消失时也一样
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
bodyheight: 3000px;
#searchwidth: 500px;height: 50px;background: red;position: absolute;top:0px;
</style>
<script type="text/javascript">
window.onresize=window.onscroll=window.onload=function()
var oSearch=document.getElementById("search");
var bodyScrollTop=document.body.scrollTop||document.documentElement.scrollTop;
if(bodyScrollTop>200)
oSearch.style.display="block";
oSearch.style.top=bodyScrollTop+"px";
else
oSearch.style.display="none";
</script>
</head>
<body>
<div id="search" style="display:none;"> </div>
</body>
</html>
你的要求是动画，可以用Tween实现动画效果，需要引用tween.js文件，并设置t,start,change,endT四个参数。你可以网上找找看
参考技术B <script src="Scripts/jquery-1.9.1.min.js"></script><style>
body
margin:0 auto;
padding:0;
.top
position:fixed;
left:0px;
top:0px;
width:100%;
height:30px;
background-color:rgba(0, 0, 0, 0.62);
display:none;
.main
width:100%;
background-color:pink;
height:1000px;
</style>
<script>
$(window).scroll(function ()
var top = document.documentElement.scrollTop;
if (top == 0)
$('.top').css('display', 'none');
else
$('.top').css( 'display': 'block' );
);
</script>
</head>
<body>
<div class="top display">
</div>
<div class="main">
</div>
</body>
JS弹出层遮罩,隐藏背景页面滚动条细节优化
做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条，让其不能滚动，这样用户体验会好很多，当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容。
一、去除滚动条方法
给body添加overflow：hidden属性即可，IE6、7下不会生效，需要给html增加overflow:hidden属性
样式中需要对IE6、7及其它浏览器用hack辨别，这是因为当页面拉到下面时如果html或body被overflow:hidden，透明弹层下面的页面就会被部分正常隐藏，通过透明看到的一片的灰度，具体颜色跟平台及用户设置背景色有关。
body或html去掉滚动条后，页面会有一个滚动条宽度/2的跳动！这个跳动对用户体验来十分不好，因此给body添加一下右padding，大小为滚动条的宽度。windows平台下滚动条的宽度为17px，linux平台下不同滚动器滚动条宽度不一致，可以用相关代码计算出滚动条的宽度，以下以windows平台为例。
相关代码：
document.documentElement.style.cssText = ‘overflow:none;+overflow:hidden;_overflow:hidden;‘;
document.body.style.cssText = ‘overflow:hidden;+overflow:none;_overflow:none;padding:0 17px 0 0;‘;
以上代码不考虑html或body是否有内联样式 ，如果html或body有内联样式则需要累加，否则会清空原有样式。
二、去除隐患其它方法滚动页面(防止误操作)
隐藏滚动条后，用鼠标滚轮滚动页面确实不会动了，以为这就ok了，不是…
键盘快捷键也可以操作浏览器的一些操作，与滚动页面相关的，比如：上下按键、翻页按键等。针对键盘快捷键，需要取消他们的默认操作。
三、添加弹出层样式
给body添加全局样式(兼容IE6)
height:100%;
给弹层添加滚动样式
overflow-y: auto;
width: 100%;
height: 100%;
left:0;
_padding:0 17px 0 0; //IE6bug，子元素绝对定位后对于父元素的padding依然有效
从 fancybox 插件中提取出来的检测方法大体如下
w1 = $(window).width(); H.addClass(‘fancybox-lock-test‘); w2 = $(window).width(); H.removeClass(‘fancybox-lock-test‘); $("<style type=‘text/css‘>.fancybox-margin{margin-right:" + (w2 - w1) + "px;}</style>").appendTo("head");
检测添加类的目的就是取消滚动条，
.fancybox-lock-test { overflow-y: hidden !important; }
更详细的弹窗可参考于江水的：再谈弹窗那些事
以上是关于我想实现打开页面时隐藏顶部那个层， 滚动条下拉几百距离时就出现隐藏的层 当滚动条到顶部时又隐藏的主要内容，如果未能解决你的问题，请参考以下文章