设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个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隐藏的更多相关文章
- 痞子衡嵌入式:一个关于Segger J-Flash在Micron Flash固定区域下载校验失败的故事(SR寄存器BP[x:0]位)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家讲的是一个关于Segger J-Flash在Micron Flash固定区域下载校验失败的故事. 痞子衡最近在支持一个 i.MXRT1170 欧 ...
- 使一个div始终显示在页面中间
使一个div始终显示在页面中间 假设我们有一个div层:<div id=”myDiv”></div> 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样 ...
- vue js手机端滑到某一个位置时固定位置显示
1.HTML <div id="searchBar"><ul class="items_filter" :class="search ...
- 浅谈table和DIV网页布局
DIV+CSS是网站标准(或称“WEB标准”)中常用的术语之一,通常为了说明与HTML网页设计语言中的表格(table)定位方式的区别,因为XHTML网站设计标准中,不再使用表格定位技术,而是采用DI ...
- 移动端页面 弹出框滚动,底部body锁定,不滚动 / 微信网页禁止回弹效果
需求:页面有弹出层菜单,当弹出层菜单超出屏幕可视区域时,不能滚动.加上滚动后,底部body的滚动事件如何禁止,加上了overflow:hidden;还是不可用. 如下图:地区弹出框可以滚动,而底部的b ...
- c# winform 窗体起始位置 设置
窗体起始位置为顶部中间,WinForm居中显示: ; ; this.StartPosition = FormStartPosition.Manual; //窗体的位置由Location属性决定 thi ...
- 3ds max画曲线 设置摄像机的起始位置
参考 http://www.3dmax8.com/3dmax/2013/0916/5661.html 如果想创建曲线段,可以在单击下一个点时按住鼠标不放,继续拖曳,再拖到另一个点上,单击鼠标右键,即可 ...
- 精通CSS+DIV网页样式与布局--制作实用菜单
在上篇博文中,小编中主要的简单总结了一下CSS中关于如何设置页面和浏览器元素,今天小编继续将来介绍CSS的相关基础知识,这篇博文,小编主要简单的总结一下在CSS中如何制作网页中的菜单,这部分的内容包括 ...
- 精通CSS+DIV网页样式与布局--图片效果
提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...
随机推荐
- iOS中的静态库与动态库,区别、制作和使用
如果我们有些功能要给别人用,但是又不想公开代码实现,比如高德地图.第三方登录分享等等,这时候我们就要打包成库了.库分静态库和动态库两种: 静态库:以.a 和 .framework为文件后缀名.动态库: ...
- java之堆和栈的比较
当我们第一次接触堆和栈时很多人都不不明白java中为什么要设置这两个概念,他们都有什么作用?堆和栈有什么区别,各自都有什么特点?还有Java中存在栈这样一个后进先出(Last In First Out ...
- IntelliJ配置SpringMVC提示“found:java.lang.String required:java.lang.String”
File->Invalid Cache&Restart 据说Android Studio也会出现这个问题,但是没遇到过 重启环境后,找不到Controller的问题也解决了
- Vue 通过 Lodash 限制操作频率
<template> <div id="watch-example"> <p> Ask a yes/no question: <input ...
- Laravel创建产品-CRUD之Create and Store
上一篇说了laravel用crud之index列出产品items,我们现在试着添加产品,用到CRUD的 Create 和 Store 方法,打开/app/Http/Controllers/ItemCo ...
- 帝国cms如何调用指定id的文章到首页?
小美女用帝国cms建了一个站,现在首页调出指定id为12的文章作为推荐,附带文章摘要,她想用代码的形式直接掉用,以后方便修改.那么,帝国cms如何调用指定id的文章呢?指定信息id,不是调用指定栏目i ...
- 20180322 对DataTable里面的数据进行去重
对DataTable里面的数据进行去重 DataTable dt = new DataTable(); dt.Columns.Add("Id", typeof(int)); dt. ...
- Python3学习之路~3.2 递归、函数式编程、高阶函数、匿名函数、嵌套函数
1 递归 在函数内部,可以调用其他函数.如果一个函数在内部调用自身本身,这个函数就是递归函数. def calc(n): print(n) if int(n / 2) == 0: return n r ...
- vue-element分页
<template> <card-layout :title="L('Users')" :actions="actions" @click=& ...
- vue/cli 3.0 脚手架【进阶】 使用 amfe-flexible 和 postcss-px2rem进行移动端适
安装vue-cli3 npm install -g @vue/cli 创建项目 vue-cli-test 脚手架-项目-成功-运行项目 基于vue-cli配置移动端自适应 转自:http://hj ...