Question

我正在寻找一个导航栏，该导航栏在向下滚动时会隐藏，然后仅在其悬停时才会显示其自身，任何帮助将不胜感激。

尝试使用一些JavaScript，但没有成功，因此我只保留了该代码。

相对较新，只是想弄清楚一些东西，如果我的帖子不太清楚或格式不正确，则感到抱歉。

NSData valueData = NSData.FromBytes(value, 1);

@charset "UTF-8";
#mySidenav a {
  position:fixed;
  right: -10px;
  transition: 0.7s;
  padding: 15px;
  width: 100px;
  text-decoration: none;
  text-align: center;
  font-size: 20px;
  color: white;
  border-radius: 5px 0 0px 5px;
  opacity: .5;
}


#mySidenav a:hover {
  right: 0;
  opacity: 1;
}

#about {
  top: 20px;
  background-color: #4CAF50;
}

#blog {
  top: 80px;
  background-color: #2196F3;
}

#projects {
  top: 140px;
  background-color: #f44336;
}

#contact {
  top: 200px;
  background-color: #555
}

Answer 1

在!important上添加right #mySidenav a:hover属性

#mySidenav a:hover {
  right: 0 !important;
  opacity: 1;
}

https://jsfiddle.net/lalji1051/w9u5bfL7/2/

Answer 2

只需尝试一下：

@charset "UTF-8";
#mySidenav a {
  position:fixed;
  right: -10px;
  transition: 0.7s;
  padding: 15px;
  width: 100px;
  text-decoration: none;
  text-align: center;
  font-size: 20px;
  color: white;
  border-radius: 5px 0 0px 5px;
  opacity: .5;
}


#mySidenav a:hover {
right: 0 !important;
opacity: 1;
   }

#about {
  top: 20px;
  background-color: #4CAF50;
}

#blog {
  top: 80px;
  background-color: #2196F3;
}

#projects {
  top: 140px;
  background-color: #f44336;
}

#contact {
  top: 200px;
  background-color: #555
}

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="Web Site CSS.css" rel="stylesheet" type="text/css">
</head>
	
<body>
<div id="mySidenav" class="sidenav">
  <a href="#" id="about">About</a>
  <a href="#" id="blog">Exhibitions</a>
  <a href="#" id="projects">Past Work</a>
  <a href="#" id="contact">Social Info</a>
</div>
	
<div style="padding:15px 15px 2500px;font-size:30px;margin-top:30px;">
  <p><b>Looking to hide the nav bar when scrolled down and if the page isn't at the top</b></p>
  <p>Scroll down to understand what I'm meaning</p>
  <p>Also looking to make it slide out when hovered over </p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
	
	<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("about").style.right = "-10px";
	document.getElementById("blog").style.right = "-10px";
	document.getElementById("projects").style.right = "-10px";
	document.getElementById("contact").style.right = "-10px";
  } else {
    document.getElementById("about").style.right = "-100px";
	document.getElementById("blog").style.right = "-100px";
	document.getElementById("projects").style.right = "-100px";
	document.getElementById("contact").style.right = "-100px";
  }
  prevScrollpos = currentScrollPos;
}
	</script>	
</body>	
</html>

我对您的代码进行了哪些更改？

我仅使用重要财产来解决您的问题

我替换为： right: 0; 为此： right: 0 !important;。

希望这对您有帮助，谢谢。

隐藏/滑动侧导航栏

2 个答案: