通过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
广东情侣旅游去哪比较好玩?省内景点推荐：http://www.30bags.com/a/662395.html
广州海珠湿地公园好不好玩？：http://www.30bags.com/a/680411.html
2021深圳光明区文化馆中秋活动报名入口：http://www.30bags.com/a/681396.html
unsplash：https://www.ikjzd.com/w/756
柠檬树：https://m.ikjzd.com/w/1607
网站数据分析：https://m.ikjzd.com/k/12772
邮件回复注意事项And节日营销技巧！：http://www.kjdsnews.com/a/761427.html
独立站选Ueeshop，Ueeshop B2C版本又该如何选择？：https://m.ikjzd.com/articles/153718
客户被繁琐的流程劝退？Ueeshop询盘购物车帮你挽回！：https://m.ikjzd.com/articles/153714
没有评论:
发表评论