您可以定位标题和导航 prenav 的父元素，并设置背景颜色，当 window.pageYOffset 在 scroll 事件侦听器中达到特定阈值时，使用过渡来更改背景颜色。如果您再次向上滚动到折叠处，请使用另一个条件将其改回...

如果您想更改字体颜色而不是背景颜色，请将 el.style.backgroundColor 更改为 el.style.color ，并将过渡从 logo.style.transition = 'background .5s ease-out' 更改为 logo.style.transition = 'color .5s ease-out' 。

const logo = document.querySelector('#pronav')

const getOffset = () => {
  if(window.pageYOffset > 100){
     logo.style.backgroundColor = 'rgba(0,0,0,0.7)'
     logo.style.transition = 'background .5s ease-out'
     logo.style.boxShadow = '0px 1px 4px black'
  }
  if(window.pageYOffset < 100){
     logo.style.backgroundColor = 'rgba(0,0,0,0)'
     logo.style.transition = 'background .5s ease-out'
     logo.style.boxShadow = 'none' 
  }
}

window.addEventListener('scroll', getOffset)

body {
  font-family: 'Montserrat';
  font-size: 22px;
  background-color: #f1f1f1;
}

*, body{
  margin: 0;
  padding: 0;
}

body, html {
  height: 100%;
  margin: 0;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------- */
/* -----------------------------Background------------------------------- */
/* ----------------------------------------------------------------------*/


/* ---------------------------------------------------------------------- */
/* -----------------------------Navigation------------------------------- */
/* ---------------------------------------------------------------------- */

/* Make the header */
.header{
  height: 80px;
  background: transparent;
  padding: 0 20px;
  color: #000000;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
}

/* Set the logo */
.logo{
  line-height: 80px;
  float: left;
  position: fixed;
  top: 0;
  z-index: 1030;
  color: #fff;
}

.pronav {
  background-color: rgba(0,0,0,0.7);
  transition: background .5s ease-out;
  box-shadow: 1px 0px 4px black;
}

/* Set the clickable nav to the right */
.menu{
  float: right;
  line-height: 80px;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1030;
  font-size: 20px;
}

/* Transition and color of attribute tags */
.menu a{
  color: #fff;
  text-decoration: none;
  padding: 0 20px;
  transition: 0.4s;
}

/* Set color for hover */
menu a:hover {
  text-decoration: underline;
}

.show-menu-btn,.hide-menu-btn{
  transition: 0.4s;
  font-size: 30px;
  cursor: pointer;
  display: none;
  color: #fff;
}

.show-menu-btn{
  float: right;
}

.show-menu-btn i{
  line-height: 100px;
}

.menu a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
  color: #AEC6CF;
}

#chk{
  position: absolute;
  visibility: hidden;
  z-index: -1111;
}

/* ---------------------------------------------------------------------- */
/* --------------------------Responsive-Menu---------------------------- */
/* ---------------------------------------------------------------------- */

@media screen and (max-width:900px) {
  .show-menu-btn,.hide-menu-btn{
    display: block;
  }
  .menu{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #f1f1f1;
    right: -100%;
    top: 0;
    text-align: center;
    padding: 80px 0;
    line-height: normal;
    transition: 0.7s;
  }
  .menu a{
    display: block;
    padding: 20px;
    color: black;
  }
  .hide-menu-btn{
    position: absolute;
    top: 40px;
    right: 40px;
  }
  #chk:checked ~ .menu{
    right: 0;
  }

  .header {
    height: 90px;
  }

  .logo {
    line-height: 90px;
  }

  .menu ul a {
    line-height: 90px;
  }

  .show-menu-btn i, .hide-menu-btn i{
    line-height: 90px;
  }

  .hide-menu-btn {
    color: #000000;
  }
}

/* ---------------------------------------------------------------------- */
/* ------------------------------Sections-------------------------------- */
/* ---------------------------------------------------------------------- */

/* Section for text */
.main {
  text-align: center;
  padding: 20px;
  margin-top: 20px;
}

/* Make text smaller and centered on desktop screen */
.main p {
  margin-top: 10px;
  font-size: 18px;
  padding-left: 100px;
  padding-right: 100px;
}

/* Header Underline */
hr {
  width: 230px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10px;
  color: #AEC6CF
}

/* Make text larger and on the left for mobile */
@media screen and (max-width:800px) {
  .main p {
    font-size: 20px;
    padding-left: 20px;
    padding-right: 20px;
    text-align: left;
  }
}

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel='stylesheet' href='style.css'>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css">
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
  <meta charset="utf-8"/>
</head>
<body>

<div class="bg" id='home'></div>
<div class="header" id='pronav'>
  <div class='logo' id='logo'>
    <p style='font-size:35px; '>lunAr-creator</p>
  </div>
  <input type="checkbox" id="chk">
  <label for="chk" class="show-menu-btn">
    <i class="fas fa-bars"></i>
  </label>
  <ul class="menu" id='navbar'>
    <a href="#home" onclick="navbarFunc()">Home</a>
    <a href="#about" onclick="navbarFunc()">About</a>
    <a href="#projects" onclick="navbarFunc()">Projects</a>
    <a href="#useful_links" onclick="navbarFunc()">Useful Links</a>
    <a href="#contact" onclick="navbarFunc()">Contact</a>
    <label for="chk" class="hide-menu-btn">
      <i class="fas fa-times"></i>
    </label>
  </ul>
</div>

<div class="main" id="about">
  <h2 style='margin-top: 90px;'>About Me</h2>
  <hr/>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  </p>
</div>

<div class="main" id="projects">
  <h2>Projects</h2>
  <hr/>
  <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris.   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec venenatis faucibus metus eu dignissim. Nunc eleifend non tellus a molestie. Sed eleifend porta diam, non varius risus laoreet id. Ut nisi purus, bibendum a vestibulum in, pulvinar a tellus. In mattis enim eu risus ullamcorper, quis semper est elementum. In a dapibus leo. Morbi elit elit, euismod in purus in, fermentum pellentesque diam. Praesent ligula diam, congue sit amet ullamcorper vel, vestibulum vitae magna. Suspendisse potenti. In nisi nibh, pretium id odio in, pellentesque porttitor orci. Duis sed imperdiet mauris. 
  </p>
</div>

</body>
</html>