通过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. [源码解析] PyTorch 分布式(18) --- 使用 RPC 的分布式管道并行

    [源码解析] PyTorch 分布式(18) --- 使用 RPC 的分布式管道并行 目录 [源码解析] PyTorch 分布式(18) --- 使用 RPC 的分布式管道并行 0x00 摘要 0x0 ...

  2. CF749A Bachgold Problem 题解

    Content 给定一个数 \(n\),求它最多能够拆分成多少个质数,并输出拆分成的每一个质数. 数据范围:\(2\leqslant n\leqslant 10^5\). Solution 我们考虑尽 ...

  3. CF1455A Strange Functions 题解

    Content 定义一个函数 \(f(x)\) 为 \(x\) 翻转并去掉前导零之后的数,现在有 \(t\) 组询问,每组询问给定一个整数 \(n\),请求出对于所有的 \(1\leqslant x\ ...

  4. SpringBoot项目存放微信的验证文件，把微信的验证文件放在根目录下

    我们做微信开发的时候,有时候会有如下要求 用户在网页授权页同意授权给公众号后,微信会将授权数据传给一个回调页面,回调页面需在此域名下,以确保安全可靠. 下载文件 将以下文件上传至填写域名或路径指向的w ...

  5. wayne编译支持k8s1.16+

    GitHub: https://github.com/Qihoo360/wayne 文档: 由于wayne 官方文档链接已经失效了,我们可以通过这里查看 wayne 文档, 除了这个地方,我们询问之前 ...

  6. nim_duilib（1）之第一个dui executable(including configure setting in vs2017)

    before starting clone nim_duilib: https://github.com/netease-im/NIM_Duilib_Framework 迁出github的源码即可. ...

  7. 【LeetCode】448. Find All Numbers Disappeared in an Array 解题报告（Python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 方法一:暴力求解 方法二:原地变负做标记 方法三:使用set ...

  8. 【LeetCode】393. UTF-8 Validation 解题报告（Python）

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

  9. Exploring Architectural Ingredients of Adversarially Robust Deep Neural Networks

    目录 概 主要内容 深度 宽度 代码 Huang H., Wang Y., Erfani S., Gu Q., Bailey J. and Ma X. Exploring architectural ...

  10. 使用.NET 6开发TodoList应用(13)——实现查询分页

    系列导航及源代码 使用.NET 6开发TodoList应用文章索引 需求 查询中有个非常常见的需求就是后端分页,实现的方式也不算复杂,所以我们本文仅仅演示一个后端查询分页的例子. 目标 实现分页查询返 ...