原生js实现吸顶导航和回到顶部特效
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>吸顶导航特效</title>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
.main{
width: 100%;
background: #ccc;
margin: 10px auto 0;
position: relative;
}
.content{
width: 100%;
height: 400px;
background: #0FF2D8;
margin: 10px auto 0;
line-height: 400px; }
.navigation{
width: 100%;
height: 40px;
background: #E589B4;
margin: auto 0;
top: 400px;
left: 0;
position: absolute;
}
.tab{
width: 180px;
height: 40px;
background: #DB3179;
float: left;
margin-left: 5px;
line-height: 40px;
text-align: center;
}
#div1{
width: 100px;
height: 100px;
background: green;
position: fixed;
bottom: 0;
right: 0;
display: none;
line-height: 100px;
text-align: center; }
</style>
<script type="text/javascript">
window.onload = function(){
var navigaOffsetTop = 0;
function my_getElementsByClassName(class_name){
var arr = [];
elements = document.getElementsByTagName('*');
for (var i = 0; i < elements.length; i++) {
if(elements[i].className == class_name){
arr[arr.length] = elements[i]; }
}
return arr;
}
//导航条悬停在顶部
function navigaStayTop(){
var navigationBar = [];
if(document.getElementsByClassName){
navigationBar = document.getElementsByClassName('navigation');
}else{
//非标准IE下
navigationBar = my_getElementsByClassName('navigation');
}
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
if (scrollTop > navigaOffsetTop){
navigationBar[0].style.top = scrollTop + "px";
} else{
navigationBar[0].style.top = navigaOffsetTop + "px";
}
}
//给导航条上七个tab加上点击事件
var tabs = [];
if(document.getElementsByClassName){
tabs = document.getElementsByClassName('tab');
}else{
tabs = my_getElementsByClassName("tab");
} var contents = [];
if (document.getElementsByClassName) {
contents = document.getElementsByClassName('content'); } else{
//Ie
contents = my_getElementsByClassName('content');
};
tabs[0].onclick=function(){
window.scrollTo(0, contents[2].offsetTop);
}
tabs[1].onclick=function(){
window.scrollTo(0, contents[3].offsetTop);
}
tabs[2].onclick=function(){
window.scrollTo(0, contents[4].offsetTop);
}
tabs[3].onclick=function(){
window.scrollTo(0, contents[5].offsetTop);
}
tabs[4].onclick=function(){
window.scrollTo(0, contents[6].offsetTop);
}
tabs[5].onclick=function(){
window.scrollTo(0, contents[7].offsetTop);
}
tabs[6].onclick=function(){
window.scrollTo(0, contents[8].offsetTop);
} //获取页面上导航条到顶部的位置
var navigationBar = [];
if (document.getElementsByClassName) {
navigationBar = document.getElementsByClassName('navigation'); } else{
navigationBar = my_getElementsByClassName('navigation'); }
navigaOffsetTop = navigationBar[0].offsetTop; //给滚动条以及鼠标加上滚动事件
// window.onscroll= naviga_stay_top;
// document.onmousewheel= navigaStayTop;
if(window.attachEvent){
window.attachEvent("onmousewheel", navigaStayTop);
window.attachEvent("onscroll", navigaStayTop); document.attachEvent("onmousewheel", navigaStayTop);
document.attachEvent("onscroll", navigaStayTop); }else{
window.addEventListener("mousewheel", navigaStayTop,false);
window.addEventListener("scroll", navigaStayTop,false); document.addEventListener("mousewheel", navigaStayTop,false);
document.addEventListener("scroll", navigaStayTop,false); }
//回到顶部
var div1 = document.getElementById('div1');
window.onscroll = function(){
var t = window.pageYOffset;
if (t>200) {
div1.style.display = 'block'; } else{
div1.style.display = 'none'; }
}
div1.onclick = function(){
window.scrollTo(0,0);
} }
</script>
</head>
<body>
<div class="main">
<div class="content">1</div>
<div id="nav" class="navigation">
<div class="tab">概念</div>
<div class="tab">设计</div>
<div class="tab">功能</div>
<div class="tab">操作系统</div>
<div class="tab">技术规格</div>
<div class="tab">购买方式</div>
<div class="tab">付款方式</div>
</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>
<div class="content">5</div>
<div class="content">6</div>
<div class="content">7</div>
<div class="content">8</div>
<div class="content">9</div>
<div class="content">10</div>
</div>
<div id="div1">回到顶部</div>
</body>
</html>
效果图：
原生js实现吸顶导航和回到顶部特效的更多相关文章
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- js 实现吸顶效果 || 小程序的吸顶效果
小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img ...
- js悬浮吸顶
<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>吸顶和锚点链接</t ...
- js之吸顶效果
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
- 使用『jQuery』『原生js』制作一个导航栏动效 —— { }
效果 HTML部分 <body> <nav> <div id="nav1">导航1</div> <div id="n ...
- 模仿jquery--offset方法。原生JS获取任意元素到文档document顶部的距离
1.通过遍历目标节点.目标节点的父节点,依次溯源. 然后累加这些节点到其最近可定位的祖先节点的距离.向上直到document. 其中,需要使用到节点的offsetTop/offsetLeft属性,来获 ...
- react 吸顶实现
今天获取到一个需求,其实就是吸顶的需求,页面下滑,某一块dom隐藏时发生吸顶现象.这种特效其实老生常谈了,但是在这次做的时候,突发奇想,能否将其做成一个 hook ,从而实现出传递ref即可使得 do ...
- js实现导航栏的吸顶操作
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...
随机推荐
- SDK更新太慢
同时,更新ADT和SDK Manager 在SDK Manager下Tools->Options打开了SDK Manager的Settings,选中“Force https://… source ...
- （转）自适应网页设计（或称为响应式web设计）（Responsive Web Design）
随着3G的普及,越来越多的人使用手机上网. 移动设备正超过桌面设备,成为访问互联网的最常见终端.于是,网页设计师不得不面对一个难题:如何才能在不同大小的设备上呈现同样的网页? 手机的屏幕比较小,宽度通 ...
- sql优化-hint的作用
目前,oracle采用的是CBR优化器,所以在有些时候,机器会按照自己的意愿去执行sql,当然oracle是根据本身的一些信息来做决定的,比如:统计信息.但有些时候,机器并不一定会按照我们预想的那样去 ...
- Test Bench基础知识笔记
学的内容多了,好多指令和用法都容易遗忘和混淆,出现这种情况就需要勤记笔记,忘记了多翻阅几次,基本上就能完全记住了. [`timescale 1ns/1ps]前一个1ns表示时延时间,后一个1ps表示时 ...
- docker rancher 负载均衡做路由跳转
介绍 我们要实现的目的是 根据负载均衡 跳转到指定的应用容器中 负载均衡中配置好 跳转的地址 当执行URL 请求的时候会自动跳转 测试方法 curl -v --header 'Host:mu.03in ...
- js读取本地磁盘文本文件并保存为JSON数据(有格式的文本)
主要的代码是红色区域,HTML5获取本地文件对象并进行操作 //给上传按钮添加点击事件 $(".myappTXTUploadBtn").click(function(){ var ...
- 懂，你的App生，不懂，死！
近期有一些开发人员.创业公司的人加我微信viyi88,咨询一些关于自己App的事情.被问得最多的可能就是:"我的App怎样推广添加下载量?"而且信誓旦旦地说自己的App做得非常好, ...
- 打造强势智能手表平台:Testin云測携手索尼招募全球开发人员
打造强势智能手表平台:Testin云測携手索尼招募全球开发人员 2014/10/27 · Testin · 业界资讯 日前,全球最大的移动游戏.应用真机和用户云測试平台Testin云測宣布联手索尼公司 ...
- WIN32 根据程序名(映像名称)终止外部程序
场景: 1.有时候需要调用外部程序,但是外部程序有可能崩溃挂起,这样这个进程就没法结束,所以再在下次调用前需要先结束之前调用的. 2.没考虑到权限问题,应该是只能终止当前用户启动的进程. #inclu ...
- [转]allocWithZone 和 单例模式
一.问题起源 一切起源于Apple官方文档里面关于单例(Singleton)的示范代码:Creating a Singleton Instance. 主要的争议集中在下面这一段: ? 1 2 3 4 ...