原生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"% ...
随机推荐
- 关于T-SQL重编译那点事，WITH RECOMPILE和OPTION(RECOMPILE)区别仅仅是存储过程级重编译和SQL语句级重编译吗
本文出处:http://www.cnblogs.com/wy123/p/6262800.html 在考虑重编译T-SQL(或者存储过程)的时候,有两种方式可以实现强制重编译(前提是忽略导致重编译的 ...
- C#常用工具类——Excel操作类
/// 常用工具类——Excel操作类 /// <para> ------------------------------------------------</para> / ...
- Binary image
http://www.uio.no/studier/emner/matnat/ifi/INF3300/h06/undervisningsmateriale/week-36-2006-solution. ...
- poj 2081 Recaman's Sequence
開始还以为暴力做不出来,须要找规律,找了半天找不出来.原来直接暴力.. 代码例如以下: #include<stdio.h> int a[1000050]; int b[100000000] ...
- Android自定义“图片+文字”控件四种实现方法之 二--------个人最推荐的一种
http://blog.csdn.net/yanzi1225627/article/details/8633872 第二种方法也要新建一个图片+文字的xml布局文件,然后写一个类继承自LinearLa ...
- careercup-链表 2.2
2.2 实现一个算法,找到单链表中倒数第k个节点. 这道题的考点在于我们怎么在一个单链表中找到倒数第n个元素? 由于是单链表,所以我们没办法从最后一个元素数起,然后数n个得到答案. 但这种最直观的思路 ...
- Linux中Curl命令couldn't connect to host解决方案 php操作Curl（http,https）无法获取远程数据解决方案
本人在做百度账户第三方登录接口,获取百度token,利用php操作curl post方式发送请求token,出现couldn't connect to host错误.经过调试测试,最后终于成功.回头写 ...
- Windows I/O模型、同步/异步、阻塞/非阻塞
转载自:http://www.cppblog.com/tx7do/articles/5954.html 同步 所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回.按照这个定义,其实 ...
- Android - 获取字符串长度的宽度
Paint paint = new Paint(); float strWidth = paint.measureText(String);
- wordpress 后台显示空白现象
简单的说两句,出现此种现象的因素可能在于主题或者插件再或者是因为(恶意)插件(误更改)更改了某个重要的文件出现错误.本次我遇到的是插件的错误,具体是什么错误,我也没有去深究,重要的是结果! 使用排查的 ...