原生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"% ...
随机推荐
- HDU ACM 1392 Surround the Trees->凸包
分析:直接求出凸包.再算边长就可以. 另外仅仅有一个点时为0.00单独处理,两个点直接为距离也单独处理. #include<iostream> #include<cmath> ...
- BTrace使用总结
btracejvisualvmhotswap 一.背景 在生产环境中可能经常遇到各种问题,定位问题需要获取程序运行时的数据信息,如方法参数.返回值.全局变量.堆栈信息等.为了获取这些数 ...
- NDK开发之获得域和方法描述符
在NDK开发之调用方法和NDK开发之访问域两篇博客中,我们在获得域ID和方法ID时都需要一个叫做描述符的参数,那么在实际开发中我们怎么知道我们要调用的域或者方法的描述符呢? 一个简单的方法就是使用Ja ...
- jquery easyUI 日期格式化，DateBox只显示年
jquery easyUI 日期格式化,DateBox只显示年 >>>>>>>>>>>>>>>>> ...
- php错误处理和异常处理
PHP错误处理有两种:标准的错误处理和异常(OOP语法新出现的错误处理机制)
- display: inline-block 的神奇效果
先上要实现的效果图: 方案一:来自卢兄: <!DOCTYPE html> <html lang="en"> <head> <meta ch ...
- Android开发手记(17) 数据存储二 文件存储数据
Android为数据存储提供了五种方式: 1.SharedPreferences 2.文件存储 3.SQLite数据库 4.ContentProvider 5.网络存储 本文主要介绍如何使用文件来存储 ...
- AsyncTask理解- Day36or37
AsyncTask理解- Day36or37 mobile 5.0 1.手机归属地查询 AtoolsActivity Assets目录特点 该文件是原生文件,不会对里面的文件进行编码 该文件只支持读取 ...
- css-a:visited
如下代码: <a href="#">链接地址</a> 如果属性 href的设置为'#',则鼠标滑过(即使没有点击',也算成'visited'.而对于 hre ...
- delphi 截取指定符号之间的字符串-随机读取
unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syste ...