原生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"% ...
随机推荐
- 蜗牛—JSP学习之JavaBean初识
初识: <%@ page language="java" import="java.util.*" pageEncoding="utf-8&qu ...
- Codeforces 114A-Cifera（暴力）
A. Cifera time limit per test 2 seconds memory limit per test 256 megabytes input standard input out ...
- jQuery--对话框插件--dialog
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 管理http服务的脚本
因为老是须要又一次安装系统,重一次都要又一次设置http服务的启动脚本.麻烦,所以这一次就把脚本备份出来. httpd for Ubuntu system: nginx + php-fpm #! /b ...
- Spring Mvc session拦截器实现
Spring Mvc拦截器实现session过期跳转到登录页面 配置拦截器 <mvc:interceptors> <mvc:interceptor> <mvc:mappi ...
- Andriod中WebView加载登录界面获取Cookie信息并同步保存,使第二次不用登录也可查看个人信息。
Android使用WebView加载登录的html界面,则通过登录成功获取Cookie并同步,可以是下一次不用登录也可以查看到个人信息,注:如果初始化加载登录,可通过缓存Cookie信息来验证是否要加 ...
- javascript中强制类型转换
javascript开发过程中,强制类型转换一般发生在条件判断和==运算符.其他情况,发生的类型转换(与这两种情况也是基本类似,属于万变不离其宗的范畴),暂不讨论. == 双等运算符 考虑代码: a ...
- 调试php的soapServer
用.NET的webservice做调试很轻松. 用soapserver的try和cacth获取不了多少信息
- like的性能问题
使用like'%匹配的文字%',无法优化,因为索引起不到作用. 不过like'匹配的文字%',索引起作用.
- 关于 复制文本 然后Ctrl+V 操作的这个功能 貌似jq也没有封装。。。
/* * copy */ function copy(){ var maintext=$("#myhtml").val(); alert(maintext); copyToClip ...