javaScript实现顶部通栏：往下滑动到距离顶部一定距离，顶部通栏消失；再往上滑动到距离顶部一定距离，顶部通栏再次出现；滚动条往上滑动也会出现（注意CSS样式中的渐变设置）

注意：

往下滑动到距离顶部一定距离，顶部通栏消失；再往上滑动到距离顶部一定距离，顶部通栏再次出现：该效果的关键点是比较当前滑动距离和自己设置的top值
滚动条往上滑动也会出现：该效果的关键点时比较上次滚动距离与当前距离

<style>

*{

margin:0px;

padding: 0px;

}

body{

height: 1200px;

}

h1{

text-align: center;

height: 0px;

background-color: pink;

font-size: 30px;

transition: height 0.5s 0s linear;//渐变效果

overflow: hidden;

width: 100%;

position: fixed;

}

p{

width: 50px;

height: 50px;

background-color: plum;

position: fixed;

right:30px;

bottom: 100px;

display: none;

}

</style>

<h1>顶部通栏</h1>

<p></p>

<script>

//获取操作对象

var h1=document.querySelector("h1")

var p1=document.querySelector("p")

var prevTop1 //上一次滚动距离

var top1 //滚动距离

var dsq

//给window对象绑定滚动事件

window.οnscrοll=function(){

//获取滚动距离

top1=document.documentElement.scrollTop

// console.log(prevTop1,top1)

//判断上一次滚动距离是否小于当前滚动距离

if(prevTop1<top1){

clearInterval(dsq)

}

//当滚动距离大于500，显示顶部通栏和按钮

if(top1>500){

h1.style.height='50px'

p1.style.display='block'

}

//当滚动距离小于300，隐藏顶部通栏和按钮

if(top1<300){

h1.style.height='0px'

p1.style.display='none'

}

prevTop1=top1

}

p1.οnclick=function(){

dsq=setInterval(function(){

//判断当前滚动距离是否小于等于0

if(top1<=0){

clearInterval(dsq)

return

}

//重新设置滚动距离

document.documentElement.scrollTop=top1-30

},50)

}

</script>

javaScript实现顶部通栏：往下滑动到距离顶部一定距离，顶部通栏消失；再往上滑动到距离顶部一定距离，顶部通栏再次出现；滚动条往上滑动也会出现（注意CSS样式中的渐变设置）相关推荐

CSS样式中选择器+盒子模型+定位+浮动
CSS样式中选择器+盒子模型+定位+浮动一.选择器选择器,选择你所需要修饰的HTML元素 1.通配符选择器 <!DOCTYPE html> <html><head&g ...
float属性html,详解CSS样式中的float属性
详解CSS样式中的float属性.float是 css 样式的定位属性.我们在印刷排版中,文本可以按照需要围绕图片.一般把这种方式称为"文本环绕".在网页设计中,应用了CSS的fl ...
css样式中关于li的横向排列
在css样式中关于li的横向排列的方法大致有两种: 第一种 :直接在<li>里面设置样式 <ul style="list-style:none;"> < ...
CSS样式中” 大于号”
CSS样式中" 大于号" 在一段CSS代码中见到一个大于号(>),代码如下: BODY#css-zen-garden > DIV#extraDiv2 { BACKGRO ...
html 中写样式,css样式中黑体怎么写
css样式中黑体怎么写 css中通过font-family指定黑体即可.font-family:"Heiti SC","黑体-简" 如果是中文字体需要加引号,字 ...
html中font-family样式,详解中文字体在CSS样式中font-family对应的英文名称
宋体:SimSun 黑体:SimHei 微软雅黑:Microsoft YaHei 微软正黑体:Microsoft JhengHei 新宋体:NSimSun 新细明体:PMingLiU 细明体:Ming ...
ol在html中意思,在CSS样式中 .ol是什么意思啊
在CSS样式中 .ol是什么意思啊作者:佚名来源:网络整理 2011-1-27 在CSS样式中.ol是什么意思啊最佳答案 1〉type类型选择项目符号用的不同样式 list-style-type ...
双下划线一粗一细怎么加_css双下划线 css样式中怎样控制下划线的粗细?
html 怎么加双横线给相应的标签加一个属性border-bottom:3px double red; 如果双线间的距离要加大,把3px改为更大的值就行了,不过不能小于3px,不然就叠在一起看不出来是 ...
在css样式中隐藏元素,用JS改变的元素CSS样式，css里display :none 隐藏 block 显示
CSS样式的引用有3种方式:style引用.class引用.id引用,所以js改变元素的样式我们也分3种来说. 1.js改变由style方式引用的样式: 方法一:document.divs.style ...

javaScript实现顶部通栏：往下滑动到距离顶部一定距离，顶部通栏消失；再往上滑动到距离顶部一定距离，顶部通栏再次出现；滚动条往上滑动也会出现（注意CSS样式中的渐变设置）

javaScript实现顶部通栏：往下滑动到距离顶部一定距离，顶部通栏消失；再往上滑动到距离顶部一定距离，顶部通栏再次出现；滚动条往上滑动也会出现（注意CSS样式中的渐变设置）相关推荐

最新文章

热门文章