通过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. MySQL 的日志：binlog

    前言:binlog 用于记录数据库执行写入性操作的日志信息,以二进制的形式保留在磁盘中.它是由 Server 层进行记录的,使用任何存储引擎都会产生 binlog. 实验准备 我们通过 Docker ...

  2. MySQL 定时器

    mysql定时器是系统给提供了event,而oracle里面的定时器是系统给提供的job.废话少说,下面创建表:create table mytable (id int auto_increment ...

  3. ESP8266学习实战之UdpClient与UdpSever(FreeRTOS)

    Udpclient 任务流程 ①判断是否获取ip地址 新建状态变量 STATION_STATUS stastatus; 调用wifi接口,并判断是否获取IP地址 ·do { stastatus = w ...

  4. ACwing1015. 摘花生

    题目: Hello Kitty想摘点花生送给她喜欢的米老鼠. 她来到一片有网格状道路的矩形花生地(如下图),从西北角进去,东南角出来. 地里每个道路的交叉点上都有种着一株花生苗,上面有若干颗花生,经过 ...

  5. [转]详细ADB使用大全

    原文链接:https://github.com/mzlogin/awesome-adb ADB,即 Android Debug Bridge,它是 Android 开发/测试人员不可替代的强大工具,也 ...

  6. Intervals（poj1201）

    Intervals Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 24134   Accepted: 9177 Descri ...

  7. Problem 2221 RunningMan(fuzoj)

     Problem 2221 RunningMan Accept: 130    Submit: 404Time Limit: 1000 mSec    Memory Limit : 32768 KB ...

  8. Hamburger Magi(hdu 3182)

    Hamburger Magi Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  9. idea使用教程-安装

    [1]将安装包进行解压-->选择固态盘符 [2]发送到桌面快捷方式,生成一个快捷方式 [3]打开: 选择主题: 先进入再说,免费试用: 创建一个项目: 选择JDK: 找到jetbrains-ag ...

  10. ORA-14450: 试图访问已经在使用的事务处理临时表

    需要对临时表动态添加列,经常碰到表在事务中被使用的情况,如果可以的话,可以现在只用临时表的时候先truncate,这样可以终止事务对当前临时表的占用. execute immediate('trunc ...