通過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="divtop"></div>
<div id="dhl">導航欄</div>
<buttion 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>
本文來自博客園，作者：永恒之月TEL，轉載請注明原文鏈接：https://www.cnblogs.com/akc4/p/15818335.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/415300.html
標籤：其他