2022年1月18日星期二

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

通过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 id=.............
原文转载：http://www.shaoqun.com/a/1450745.html

深圳福田区9月演出汇总：http://www.30bags.com/a/643283.html
2021湖北省博物馆开放时间 湖北省博物馆游玩时间 ：http://www.30bags.com/a/790409.html
光明文化艺术中心跨年元旦市集时间、地点及摊位报名：http://www.30bags.com/a/861420.html
张洁：https://m.ikjzd.com/w/1663
promotion：https://www.ikjzd.com/w/127
开发信：https://m.ikjzd.com/articles/19277
邮件回复注意事项And节日营销技巧！：http://www.kjdsnews.com/a/761427.html
独立站选Ueeshop，Ueeshop B2C版本又该如何选择？：https://m.ikjzd.com/articles/153718
客户被繁琐的流程劝退？Ueeshop询盘购物车帮你挽回！：https://m.ikjzd.com/articles/153714
发帖者 时间：

没有评论:

发表评论

订阅： 博文评论 (Atom)