通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）

效果：默认一直隐藏导航栏，当滚动条滚到超过300px按钮出现，点击回到顶部按钮回到顶部，并隐藏按钮，鼠标移动到顶部导航栏出现，鼠标移出导航栏后3秒后再次隐藏（导航栏和按钮都是固定定位）

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JavaScript_test</title>

<style>

body {

	margin: 0;

	padding: 0;

	height: 3000px;    /*让滚动条出现*/

}

.DW {

	display: flex;           /*固定定位*/

	justify-content: center;  /*让文字水平居中*/

	align-items: center;      /*让文字垂直居中*/

	width: 100%;

	height: 80px;

	background-color: green;   /*背景颜色绿色*/

	color: aliceblue;

	font-size: 2em;

	transition: top .5s linear;  /*导航栏过渡出现和隐藏*/

	position: fixed;   /* 绝对定位，不管滚动条上下滚动都在相应的位置*/

	top: -80px;        /*隐藏导航栏*/

	left: 0;

}

.goTop {

	width: 50px;

	height: 50px;

	background-color: aquamarine;

	font-size: 20px;

	text-align: center;

	line-height: 25px;

	color: azure;

	position: fixed;    /*固定定位*/

	bottom: 50px;

	right: 50px;

	display: none;   /*隐藏按钮*/

}

.fusu {

	position: fixed;    /*固定定位*/

	width: 100%;

	height: 10px;

	left: 0;

	top: 0;

}

</style>

</head>

<body>

<div class="fusu divTop" id="divtop"></div>

<div class="DW topdhl divdhl" id="dhl">导航栏</div>

<buttion class="goTop" id="gotop">回到顶部</buttion>

<script>

	//获取导航栏、按量、顶部div的元素

	var topw=document.getElementById("dhl")

	var goTop=document.getElementById("gotop")

	var divTop=document.getElementById("divtop")

	  //滚动滚动条触发事件

	    window.onscroll=function(){

		  //获取滚动条位置

		var jhlheight=document.documentElement.scrollTop||document.body.scrollTop

		//判断滚动条位置

		if(jhlheight>=300){

		goTop.style.display="block"	 //显示按钮

		}else{

		goTop.style.display="none"	//隐藏按钮

   }

	}

	 //点击按钮事件

	  goTop.onclick=function(){

		window.scrollTo({     //设置滚动条位置

			top:0,            //回到顶部

			behavior:"smooth"   //平滑过渡

		})

	}  

    //鼠标移入div后触发的事件

	var ss=divTop.onmouseover=function(){

		var tar=topw.style.top="0px"

	} 

    //鼠标移入导航栏触发的事件

    topw.onmouseover=function(){

	var tar=topw.style.top="0px"

	} 

	//鼠标移出导航栏后触发的事件

	topw.onmouseout=function(){

    //定时器函数

	setTimeout(function(){

    topw.style.top="-80px"

     },3000)

	}   

	</script>

</body>

</html>

通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现，如果移出导航栏3秒又隐藏起来，而且不受滚动条影响（二）的更多相关文章

  1. web@前端--html,css,javascript简介、第一个页面(常用标签简介)

    1.什么是标签#1.在HTML中规定标签使用英文的的尖括号即`<`和`>`包起来,如`<html>`.`<head>`.`<body>`都是标签,#2. ...

  2. 【前端】纯html+css+javascript实现楼层跳跃式的页面布局

    实现效果演示: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>楼层跳跃式的页面布局</title&g ...

  3. html+css+javascript实现列表循环滚动示例代码

    使用html+css+javascript实现列表循环滚动,设置时间定时,在规定的时间内替换前一个节点的内容,具体示例如下,感兴趣的朋友可以参考下 说明:设置时间定时,在规定的时间内替换前一个节点的内 ...

  4. 前端html+css+JavaScript 需要掌握的单词

    前端html+css+JavaScript 需要掌握的单词   broswer 浏览器(客户端) html 超文本标记语言 css 层叠样式表 javascript 语言名字(类似python/php ...

  5. HTML+Css+JavaScript知识点汇总

    HTML 部分 HTML基础知识 1. HTML简介 HTML(Hypertext Markup Language),超文本标记语言,HTML利用各种标记来标识文档的结构以及标识超链接的信息.它是从S ...

  6. html css javascript mysql php学习总结

    一. html:超文本标记语言,运行在浏览器上,由浏览器解析 1.格式 <!doctype html> 声明文档类型,说明html版本号 <html> 说明代码格式 <h ...

  7. 购书网站前端实现（HTML+CSS+JavaScript）

    购书+阅读静态网页设计与实现 一.主页设计HTML 1.效果展示及实现 2.完整代码 二.主页样式布局CSS 三.空间功能实现Javascript 主要功能 Javascript完整代码: 总结 购书 ...

  8. HTML+CSS+Javascript实现轮播图效果

    HTML+CSS+Javascript实现轮播图效果 注意:根据自己图片大小来更改轮播图大小. <!doctype html> <html> <head> < ...

  9. html css javascript 加载的顺序

    html /css /javascript 这三者的加载顺序影响整个页面的加载速度.而加载速度的快慢直接影响pv(访问量),而且会影响经济收入.在大网站中,可能打开速度快一秒,一年能多带来上亿的收入. ...

随机推荐

  1. JAVA读取本地html文件里的html文本

    /** * 读取本地html文件里的html代码 * @param file File file=new File("文件的绝对路径") * @return */ public s ...

  2. 【LeetCode】794. Valid Tic-Tac-Toe State 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 题目地址: https://leetcode.com/problems/valid-ti ...

  3. 另一个角度看元宇宙与RPA：人工世界、平行员工与RPA

    另一个角度看元宇宙与RPA:人工世界.平行员工与RPA 从元宇宙到平行员工,人工世界推动的虚实分工利好RPA 机器人是铁打营盘人类是流水兵,未来元宇宙的虚实分工RPA机会巨大 文/王吉伟 元宇宙是平行 ...

  4. 洛谷 P3431：[POI2005]AUT-The Bus（离散化+DP+树状数组）

    题目描述 The streets of Byte City form a regular, chessboardlike network - they are either north-south o ...

  5. VR AR MR的未来

    VR:VR(Virtual Reality,即虚拟现实,简称VR),是由美国VPL公司创建人拉尼尔(Jaron Lanier)在20世纪80年代初提出的.其具体内涵是:综合利用计算机图形系统和各种现实 ...

  6. C++函数参数的传递顺序

    C++编译器默认使用的是 __cdecl 模式,参数是通过栈传递的,因此是从右到左的传参顺序. int f(int a, int b, int c) { return 0; } int main(){ ...

  7. Spring企业级程序设计 • 【第3章 面向切面编程】

    全部章节   >>>> 本章目录 3.1 AOP基本概念和术语 3.1.1 AOP概念 3.1.2 AOP的术语解释 3.1.3 通知类型介绍 3.1.4 通过AOP模拟事务操 ...

  8. Java Web程序设计笔记 • 【第2章 JSP基础】

    全部章节   >>>> 本章目录 2.1 JSP 简介 2.1.1 JSP 概述 2.1.2 开发第一个 JSP 页面 2.1.3 JSP 处理流程 2.1.4 实践练习 2. ...

  9. Java程序设计基础笔记 • 【第9章 方法与参数类型】

    全部章节   >>>> 本章目录 9.1 有参数有返回值的方法 9.1.1 有参数有返回值的方法的定义和调用 9.1.2 返回值的传递过程 9.1.3 方法返回值的注意事项 9 ...

  10. 编写Java程序，遍历所有英雄信息（美和易思JDBC，PreparedStatement执行查询语句练习习题）

    返回本章节 返回作业目录 需求说明: 继续完善英雄信息系统.使用JDBC技术,通过PreparedStatement对象的executeQuery()方法获取表示所有英雄数据的ResultSet结果集 ...