设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；
当页面滚动到起始位置时，头部div出现，底部div隐藏
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="../css/test1.css" rel="stylesheet" />
<style>
.head{
position:fixed;
top:0px;
100%;
height:50px;
text-align:center;
line-height:50px;
border:1px solid gray;
background-color:#fd3;
}
.nav-d{
display: none;
100%;
padding: 5px 0px;
background: #eeeeef;
position: fixed;
bottom: 0;
}
.nav-d-div{
text-align: center;
padding-top: 6px;
33%;
float: left;
}
.nav-d-div:nth-child(1)>a{
display: flex;
justify-content: center;
align-items: center;
}
.nav-d a{
font: normal 14px "微软雅黑";
color: #231815;
}
.nav-d img{
text-align: center;
}
</style>
</head>
<body>
<div id="dd" class='head'>
顶头固定栏
</div>
1<br />
<br />
<br />
<br />
2<br />
<br />
<br />
<br />
3<br />
<br />
<br />
<br />
4<br />
<br />
<br />
<br />
5<br />
<br />
<br />
<br />
6<br />
<br />
<br />
<br />
7<br />
<br />
<br />
<br />
8<br />
<br />
<br />
<br />
9<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
10<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
11<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
12<br />
<br />
<br />
<br />
<br />
<br />
<br />
13<br />
<br />
<br />
<br />
<br />
14<br />
<div id="cc" class="nav-d">
<div class="nav-d-div">
<a href="tel:400123456">
<div>拨打电话</div>
</a>
</div>
<div class="nav-d-div">
<div>微信：Lu321456</div>
</div>
<div class="nav-d-div">
<a href="#">
<div>立即订购</div>
</a>
</div>
</div>
</body>
<script>
var tt = 200;
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
if(t > tt && getStyle(dd,"display")!="none" && getStyle(cc,"display")=="none"){
dd.style.display="none";
cc.style.display="block";
}else if(t<tt&&getStyle(dd,"display")=="none"&&getStyle(cc,"display")!="none"){
dd.style.display="block";
cc.style.display="none";
}else{
return false;
}
}
var getStyle = function(dom,attr){
return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];
}
</script>
</html>