原生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"% ...
随机推荐
- leetcode第一刷_Triangle
非常easy的一道DP,看到空间限制是O(N)的,不要习惯性的以为是要保存每一行的最小值,不难想到是要保存一行其中各个数为路径终点时的和的大小.当算到最后一行时,就是从顶部究竟部以这个底部位置为终点的 ...
- 64位开源处理器Rocket该人士介绍
最近大概读一点UCB发布时间Rocket处理器的源代码,的每个文件的源代码的功能有一定的一般理解,Mark一点点. Rocket是一家64bit标量处理器,5第一阶段管道,用途risc-v指令集.综合 ...
- 看懂下面C++代码才说你理解了C++多态虚函数!
#include <iostream> using namespace std ; class Father { private : virtual void Say() //只有添加 ...
- Android开发之意图解析
android中意图(intent)就是告诉系统要做某件事情.比如要拨打电话或者发送短信. 或者在一个Activity中点击按钮跳转到另外一个activity时也用到意图.意图分为两种:显示意图和隐 ...
- Android 开发实践 ViewGroup 实现左右滑出窗口（二）
接上一篇 <Android 开发实践 ViewGroup 实现左右滑出窗口(一)http://www.cnblogs.com/inkheart0124/p/3532862.html> 源码 ...
- MSDN Webcast 系列课程
云计算(Cloud) 云起龙骧系列课程 网络开发(Web) ASP.NET 4 风云之旅系列课程 ASP.NET 开发实践系列课程 MOSS2007 最佳实战 StepByStep 系列课程 Silv ...
- JDK1.8聚合操作
在java8 JDK包含许多聚合操作(如平均值,总和,最小,最大,和计数),返回一个计算流stream的聚合结果.这些聚合操作被称为聚合操作.JDK除返回单个值的聚合操作外,还有很多聚合操作返回一个c ...
- 自动显示git分支--安装oh-my-zsh(Ubuntu环境)
1,安装zsh sudo apt-get install zsh 2,克隆项目 git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh- ...
- 写一个最简单的 Server
import java.net.*;import java.io.*;public class Server{ public static void main(String[] args) throw ...
- windows server 2003 系统重装蓝屏
错误码:0X0000007B 这个代码和硬盘有关系,不过不用害怕,不是有坏道了,是设置问题或者病毒造成的硬盘引导分区错误.如果您在用原版系统盘安装系统的时候出这个问题,那说明您的机器配置还是比较新的, ...