设置一个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;

    width:100%;

    height:50px;

    text-align:center;

    line-height:50px;

    border:1px solid gray;

    background-color:#fd3;

}

.nav-d{

	display: none;

	width: 100%;

	padding: 5px 0px;

	background: #eeeeef;

	position: fixed;

	bottom: 0;

}

.nav-d-div{

	text-align: center;

	padding-top: 6px;

	width: 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>

　　

设置一个div网页滚动时，使其固定在头部，当页面滚动到距离头部300px时，隐藏该div，另一个div在底部，此时显示；当页面滚动到起始位置时，头部div出现，底部div隐藏的更多相关文章

  1. 痞子衡嵌入式：一个关于Segger J-Flash在Micron Flash固定区域下载校验失败的故事(SR寄存器BP[x:0]位)

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是一个关于Segger J-Flash在Micron Flash固定区域下载校验失败的故事. 痞子衡最近在支持一个 i.MXRT1170 欧 ...

  2. 使一个div始终显示在页面中间

    使一个div始终显示在页面中间 假设我们有一个div层:<div id=”myDiv”></div> 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样 ...

  3. vue js手机端滑到某一个位置时固定位置显示

    1.HTML <div id="searchBar"><ul class="items_filter" :class="search ...

  4. 浅谈table和DIV网页布局

    DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DI ...

  5. 移动端页面 弹出框滚动，底部body锁定，不滚动 / 微信网页禁止回弹效果

    需求:页面有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动.加上滚动后,底部body的滚动事件如何禁止,加上了overflow:hidden;还是不可用. 如下图:地区弹出框可以滚动,而底部的b ...

  6. c# winform 窗体起始位置 设置

    窗体起始位置为顶部中间,WinForm居中显示: ; ; this.StartPosition = FormStartPosition.Manual; //窗体的位置由Location属性决定 thi ...

  7. 3ds max画曲线 设置摄像机的起始位置

    参考 http://www.3dmax8.com/3dmax/2013/0916/5661.html 如果想创建曲线段,可以在单击下一个点时按住鼠标不放,继续拖曳,再拖到另一个点上,单击鼠标右键,即可 ...

  8. 精通CSS+DIV网页样式与布局--制作实用菜单

    在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...

  9. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

随机推荐

  1. 洛谷 P3684 机棚障碍Hangar Hurdles [CERC2016] 图论

    正解: 解题报告: 传送门! 首先不难想到这题主要有两个问题需要解决,一个是预处理出各个点的箱子半径最大值,一个是求ans 然后分别港下QwQ 首先关于预处理要说下昂 预处理有三种方法,分别港下 第一 ...

  2. BZOJ3613 南园满地堆轻絮 二分/贪心

    正解:贪心 解题报告: 传送门! 这题似乎是可以二分水过的,,,但数据可以加强一下就能简单把二分卡住了,或者修改下空间限制什么的反正就很容易能卡住 所以这里介绍一个优秀的贪心做法,O(n)的时间复杂度 ...

  3. pyqt5_eric6_Qt desinger

    麦子学院视频教程day1 1.创建pushbutton 绑定信号和槽 Ui_mainWindow.py 1 from PyQt5 import QtCore, QtGui, QtWidgets cla ...

  4. scapy 中的ARP

    scapy 常用命令 ls() //查看支持的协议对象lsc() //查看函数show() //查看数据包结构send() //三层发包sr() //三层收发sr1() //三层收发只收一 timeo ...

  5. （1）DBA查询：数据库

    1.数据库状态:[1]sys.databases   [2]exec sp_spaceused 2.数据文件状态:[1]sys.master_files [2]查看ldf与mdf:sp_helpfil ...

  6. pymysql 模块 使用目录

    mysql python pymysql模块 基本使用 mysql python pymysql模块 增删改查 插入数据 介绍 commit() execute() executemany() 函数 ...

  7. MHA 实现VIP切换用到脚本

    在MHA Manager端配置中,如果实现MHA的vip故障切换需要在配置文件/etc/masterha/app1/app1.cnf 中启用下面三个参数: master_ip_failover_scr ...

  8. SUDO安全委派和安全模块

    sudo更换身份 su  切换身份   使用su 切换身份必须首先直到被切换成用户的密码   如: su root  就必须要知道root的密码 这种机制安全性不高,容易泄露管理员密码 1. sudo ...

  9. ROS安装（2）

    1.Ubuntu无法启动了,进入不了启动界面 刚高兴一会会儿,马上系统重启,进不了登陆界面了.只有控制台的login,无语.试了好几种方法都没有解决. 重装吧!重装Ubuntu之后,装完ROS Kin ...

  10. 如何使用向量代表文档doc或者句子sentence

    1.“句向量”简介word2vec提供了高质量的词向量,并在一些任务中表现良好. 关于word2vec的原理可以参考这几篇论文: https://arxiv.org/pdf/1310.4546.pdf ...