网站导航栏锁图标异常随动问题技术求助

Hey there! Let's tackle those annoying problems with your navbar's lock icon—both the unwanted scroll movement and the quirky hover behavior. Here's a breakdown of the issues and how to fix them step by step:

Root Causes #

• Scrolling movement: Your navbar isn't anchored to the top of the page, so when you scroll, the entire nav (and the icon inside) moves with the document flow. The position: fixed you tried wasn't configured correctly for the nav container.
• Hover shift: You're applying transform: translateX(-100px) to the entire <li> holding the icon, which shifts everything instead of just revealing the Logout button.

Step-by-Step Fixes #

1. Make the Navbar Stay Fixed at the Top #

First, update your nav CSS to lock it to the top so it never scrolls away:

nav {
  margin-top: -10px;
  height: 80px;
  background-color: #2A3943;
  padding: 5px;
  box-shadow: 2.5px 2.5px 2.5px #888888;
  border-radius: 4px;
  z-index: 100; /* Ensure nav stays above other page content */
  position: fixed; /* Fix nav to the viewport top */
  width: calc(100% - 20px); /* Account for body's margin/padding */
  left: 10px; /* Match body's left margin */
  top: 10px; /* Match body's top padding */
}

Note: The width and positioning adjustments prevent the nav from overflowing the screen while matching your existing layout.

2. Fix Lock Icon & Logout Button Hover Behavior #

Let's restructure the .login section to avoid shifting the icon. We'll use relative/absolute positioning to hide the Logout button by default and reveal it smoothly on hover:

Update the .login related CSS:

nav .login {
  position: absolute;
  right: 20px; /* Pin login section to the nav's right edge */
  top: 50%;
  transform: translateY(-50%); /* Vertically center it in the nav */
}

nav .login ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative; /* Make this the reference for absolute positioning */
}

nav .login ul li {
  background-color: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: none; /* Remove unnecessary transition */
}

nav .login ul li img {
  width: 40px;
}

/* Hide Logout button by default */
nav .login ul li ul {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Show Logout button on icon hover */
nav .login ul li:hover ul {
  opacity: 1;
  visibility: visible;
}

nav .login ul li ul li {
  background-color: transparent;
  margin: 0;
}

nav .login ul li ul li button {
  border: none;
  padding: 5px 10px;
  cursor: pointer;
  background-color: #1AB188;
  color: #fff;
  transition: all .5s ease;
}

nav .login ul li ul li button:hover {
  padding: 5px 15px;
}

3. Adjust Body Padding to Avoid Hidden Content #

Since the nav is now fixed, your main content will be hidden under it. Add padding to the body to fix this:

body{
  margin-left: 10px;
  padding: 100px 10px 10px; /* Top padding matches nav height + spacing */
  font-family: arial;
  background-color: #E9EBEE !important;
}

4. Clean Up Unnecessary CSS #

Remove these lines from your original code—they're no longer needed and were causing layout issues:

• nav ul li#fort:hover { height: 400px; }
• nav ul li#pleb:hover { height: 290px; }
• transform: translateX(-100px) in nav .login ul li:hover
• margin-top: -80px and margin-left: 770px in nav .login ul li

Final Results #

• The navbar (and lock icon) will stay fixed at the top when scrolling.
• Hovering the lock icon will smoothly show the Logout button without shifting the icon itself.
• All your original dropdown behaviors and color scheme remain intact—only the problematic parts are fixed.

内容的提问来源于stack exchange，提问作者user9019807