Question

我有一个透明的导航栏，因此首先显示了我的渐变背景。但是，当我滚动时，它显示了下面的文本和/或图片，但是我希望它显示背景并覆盖文本。主页：https://gyazo.com/6c5e35ca0ed4f6f37e9e72f490737c78，向下滚动网站：https://gyazo.com/9a2957d728e36ae23e0cd9af604e8de1；向下滚动更多：https://gyazo.com/4849fb7f11689a5360e2e8686713d01d。如您所见，导航栏位于一切之上-但我希望导航栏周围有一个框，该框仅在滚动时显示背景-如果可以的话-您将如何做？ GIF显示滚动问题：https://gyazo.com/6626f65e632e61127413c673d92a2cba

相关HTML：

<html>
<head>
  <title>  Moral & Ethical Issues Concerning the use of Computer Technology </title>
  <link rel="stylesheet" href="style.css">
  <link href="https://fonts.googleapis.com/css2?family=Montserrat+Alternates&display=swap" rel="stylesheet">
  <script src="jquery.js"></script>
  <script src="main.js"></script>
  <script src="smoothscroll.js"> </script>

  <body>
    <div class="main">
      <nav class="fixed-nav-bar">
            <div class="logo">
              <img src="logo.png">
            </div>
            <div class="navigation-links">
              <ul>
                <li><a href="#body1">General</a><li>
                <li><a href="#body2">Computers in <br>the Workforce</a></li>
                <li><a href="#body3">Automated <br>Decision Making</a></li>
                <li><a href="#body4">Artificial <br>Intelligence</a></li>
                <li><a href="#body5">Environmental <br>Effects</a></li>
                <li><a href="#body6">Censorship &<br> The Internet</a></li>
                <li><a href="#body7">Monitoring<br> Behaviour</a></li>
                <li><a href="#body8">Analysis of<br> Personal<br> Information</a></li>
                <li><a href="#body9">Piracy &<br> Offensive<br> Communications</a></li>
                <li><a href="#body10">User Interface<br> Design<br>  Considerations</a><li>
                <li><a href="#body11">Contact</a></li>

              </ul>
            </div>
            <div class="gift">
            <a href="https://www.youtube.com/watch?v=dQw4w9WgXcQ" target="_blank"><img src="giftbox.png" onmouseover=this.src="giftboxhover.png" onmouseout=this.src="giftbox.png"></a>
            </div>
      </nav>

相关CSS：

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Montserrat Alternates', sans-serif;
  font-size-adjust: auto;
}
.logo {
  flex-basis: 15%;
   margin: 0;
}
.logo img{
  padding: 35px 35px;
  width: 15%;
  transition: transform .9s ease;
  overflow: hidden;
}
.logo img:hover{
  transform: scale(1.35)
}
.fixed-nav-bar{
  position:fixed;
  z-index: 9999;
  height: 200px;
  width: 100%;
}
.navigation-links{
  flex: 1;
  text-align: right;
  margin-top: -230px;
  margin-right: 106px;
  padding-right: 15px;


/* note position zzzz*/
}
.navigation-links ul {
    display: inline-flex;
}
.navigation-links ul li {
  margin: 10px 9px;;
  margin-top: 14px;
  padding: 6px 5px;
  font: Montserrat;
  font-weight: normal;
  position: relative;
  list-style: none;
  font-size: 85%;
  word-spacing: 0px;
  overflow: hidden;
  z-index: 3;
}
@media screen and (max-width: 1580px) {
  .navigation-links ul li {
      font-size: 0.75rem;
      margin: 10px 6px;
      word-spacing: 0px;
      padding: 6px 3px;
  }
  .navigation-links{
    margin-right: 74px;
    margin-top: -180px;
  }
  .logo img{
    width: 230px;
    height: 230px;
  }

}
@media screen and (max-width: 1220px) {
  .navigation-links ul li {
      font-size: 0.65rem;
      margin: 10px 5px;
      word-spacing: 0px;
      padding: 6px 2px;
  }
  .navigation-links{
    margin-right: 74px;
    margin-top: -163px;
  }
  .logo img{
    width: 205px;
    height: 205px;
  }

}

.navigation-links ul li a{
  color: #fff;
  text-decoration:none;
}
.navigation-links ul li a:hover{
  font-weight: bold;

}

.gift img{
  width: 5.5%;
  float: right;
  margin-top: -76px;
  margin-left: 10px;
  margin-right: 30px;
  padding-left: 30px;
  padding-right: 30px;

}

我不知道是否需要添加一个对背景透明但对html文件中的文本/图片不透明的块？希望这是相关的代码，以便您了解我的问题并知道如何为我提供帮助？谢谢

Answer 1

也许您可以使用JQuery来实现。您可以触发滚动页面时在导航栏上显示边框的功能。这是示例代码。

    $(window).scroll(function() {    
    var scroll = $(window).scrollTop();

    if (scroll > 0) {
      $('nav').css("border","1px solid black");
    } 

});

透明导航栏-不显示背景

1 个答案: