js之吸顶效果
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>吸顶效果</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
height: 2000px;
}
/*吸顶效果*/
#top{
line-height: 50px;
background: red;
color: yellow;
font-size: 20px;
text-align: center;
text-shadow: 0 0 8px tomato;
}
#top::selection{
color: maroon;
background:#fff;
}
/*隐藏头部*/
#header{
width: 100%;
line-height: 50px;
background: rgba(0,0,0,.4);
text-align: center;
box-shadow: 0 0 5px black;
position: fixed;
left: 0;
top: -103px;
}
#header.top{
top: 0;
transition-top:0.5;
}
.txt:hover{
box-shadow: 0 0 2px red;
}
.btn:hover{
box-shadow: 0 0 2px red;
}
.txt{
width: 190px;
height:26px;
vertical-align: middle;
border:1px solid #ccc;
border-right: 0;
outline: none;
transition: .5;
}
.btn{
width: 35px;
height:28px;
vertical-align: middle;
border:1px solid #ccc;
border-left: 0;
outline: none;
cursor: pointer;
transition: .5;
}
p{
font-size: 20px;
font-weight:30;
color:#ff0;
}
</style>
</head>
<body>
<div id="top">If you do you can do you will never more than you are now!</div>
<div id="header">
<p>悦享品质</p>
<form action="">
<input type="text" class="txt" value="SERACH..."><input type="submit" value="搜索" class="btn">
</form>
</div>
<script>
//吸顶效果
var oTop = document.getElementById('top');
setTimeout(function(){
oTop.style.display = 'none';//设置id为top的样式
},3000);
var oHeader = document.getElementById('header');
window.onscroll = function(){
//获取窗口的滚动条位置
var sScroll = document.body.scrollTop || document.documentElement.scrollTop;
if(sScroll >= 400){
oHeader.className = 'top';
}else{
oHeader.className = '';
}
}
</script>
</body>
</html>
js之吸顶效果的更多相关文章
- js 实现吸顶效果 || 小程序的吸顶效果
小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...
- react.js中实现tab吸顶效果问题
在react项目开发中有一个需求是,页面滚动到tab所在位置时,tab要固定在顶部. 实现的思路其实很简单,就是判断当滚动距离scrollTop大于tab距离页面顶部距离offsetTop时,将tab ...
- Html吸顶效果
Html吸顶效果 一.HTML HTML中需要给div一个id <!DOCTYPE html> <html lang="en"> <head> ...
- [RN] React Native 头部 滑动吸顶效果的实现
React Native 头部 滑动吸顶效果的实现 效果如下图所示: 实现方法: 一.吸顶组件封装 StickyHeader .js import * as React from 'react'; i ...
- 自定义tab吸顶效果一（原理）
PS:问题:什么是吸顶,吸顶有什么作用,吸顶怎么使用? 在很多app商城中,介绍软件的时候就会使用吸顶效果, 吸顶有很多作用,一个最简单粗暴的作用就是,让用户知道此刻在浏览哪个模块,并可以选择另外的模 ...
- 基于scroll的吸顶效果
本次要实现的是一种常见的网页效果,如下: 页面由头部,导航,主体内容三部分组成,当页面发生滚动时,头部逐渐隐藏,导航部分向上移动,直到导航部分距离浏览器顶部为零时,导航部分固定不动,保持吸顶效果,如下 ...
- better-scroll之吸顶效果巨坑挣扎中
今天和大家分享下better-scroll这款移动端用来解决各种滚动需求的插件(目前已经支持PC) 关于其中的API大家可以去官网看下 这里就给大家介绍几种常用的以及需要注意的点是什么 首先说一下b ...
- Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- tabControl组件的吸顶效果
最开始,还没有使用better-scroll插件的时候,直接在class中设定了一定的position为sticky,设置一定的top达成了效果.但是,使用better-scroll组件后,这些属性就 ...
随机推荐
- Docker run 挂载 volume 记录
docker run -i -t -v /f/a:/f/ centos:7 /bin/bash -v 本地路径 : 挂载到 centos 中 f 文件夹 中 windows10 中 不能使用 f ...
- Gray Code，求格林码
问题描述: The gray code is a binary numeral system where two successive values differ in only one bit. G ...
- sqlserver 遍历表
use Research go ); ) NOT NULL, [mrs] date); DECLARE Table_Cursor CURSOR FOR--包含有列‘sigdate’的表 select ...
- Testng中注释简介
1. @Before和@After 注释 这两个就比较多,一般用于在测试构件上.关于测试构件以后详细介绍,测试构件一般有测试之前的操作和测试运行之后的清除数据的操作. Before分类有@Before ...
- Mac OSX 如何在命令行中生成 md5、sha1、sha256 校验和
计算 MD5 校验和 md5 /tmp/hello.txt 计算 SHA-1 校验和 shasum -a 1 /tmp/hello.txt 计算 SHA-256 校验和 shasum -a 256 / ...
- 基于哈夫曼编码的压缩解压程序（C 语言）
这个程序是研一上学期的课程大作业.当时,跨专业的我只有一点 C 语言和数据结构基础,为此,我查阅了不少资料,再加上自己的思考和分析,实现后不断调试.测试和完善,耗时一周左右,在 2012/11/19 ...
- 面向目标的场景设置--Goal-Oriented Scenario
在场景设置的时候会有两种场景设置方式: 1,手动模式(Manual Scenario) 2.面向目标的场景设置模式(Goal Oriented scenario) 其中手动模式使用较多,而且灵活应用, ...
- 第九天 1-8 RHEL7软件包管理
在RHEL7中,主要有 RPM 和 YUM 两种包管理 1.RPM包管理--使用rpm命令对rpm软件包进行管理rpm命令格式:[有很多,自己可以man一下,这里只列举一下常用的]rpm -ivh [ ...
- LA-4255 Guess （拓扑排序+构造）
题目大意:一个未知的整数序列,给出其任意一个区间和的正负,还原这个序列.任意一个满足条件的序列即可. 题目分析:将连续区间和转化为前缀和之差,sumx-1与sumy的大小关系已知,以此建立一条有向边, ...
- pyhon SyntaxError: Non-ASCII character '\xe8' in file xxx on line xx, but no encoding
import math if __name__ == '__main__': name1 = raw_input("请输入您的编号:") print name1 完整的 ...