使用css或/和javascript将scoll上的标题从图像更改为纯色

Question

I'm trying to change my header from an image to a solid discreet navbar, essential like this https://dromedar.no/ .我正在尝试将我的标题从图像更改为坚实的谨慎导航栏，就像https://dromedar.no/一样必不可少。

It is a partial code, because it's used for a project so I hope it's enough.它是部分代码，因为它用于一个项目，所以我希望它足够了。 It's also the first time coding, so we know some things might be more complicated, then it has to be.这也是第一次编码，所以我们知道有些事情可能会更复杂，那就必须如此。 We can only use CSS or JS.我们只能使用 CSS 或 JS。

I can't seem to figure out how to change it from an image to a color.我似乎无法弄清楚如何将其从图像更改为颜色。

html: html：

<body onload="headerInsert();footerInsert()">
<header id="header"></header>

css: css：

#header {
  overflow: hidden;
  padding-right: 10px; 
  transition: 0.2s; 
  position: fixed; 
  top: 0; 
  z-index: 99;
}

header {
  background-image: url("https://images.pexels.com/photos/894695/pexels-photo-894695.jpeg?cs=srgb&dl=pexels-juan-pablo-serrano-arenas-894695.jpg&fm=jpg");
  background-size: 1024px;
  height: 200px;
  padding-top: 50px;
  padding-bottom: 50px;
  text-align: center;
  box-shadow: none;
}

js: js：

     window.onscroll = function() {scrollFunction()};

  function scrollFunction() {
    if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) { 
      document.getElementById("header").style.padding = "10px 0px";  
    } else {
      document.getElementById("header").style.padding = "65px 0px"; 
    }
  }


const header = document.getElementById('header');

function headerInsert(){
    const a = document.createElement('a'); 
    const img = document.createElement('img'); 
    img.src = url("https://images.pexels.com/photos/894695/pexels-photo-894695.jpeg?cs=srgb&dl=pexels-juan-pablo-serrano-arenas-894695.jpg&fm=jpg"); 
    img.alt = "logo" 
    a.href = "homepage.html"
    a.appendChild(img); 
    header.appendChild(a);

Answer 1

You can try this:你可以试试这个：

HTML: HTML：

<body>
<div id="header">
  this is the header
</div>
<div id="body">
  <p>
    some content here
  </p>
  <p>
    some content here
  </p>
  <p>
    some content here
  </p>
  <p>
    some content here
  </p>
  <p>
    some content here
  </p>
  <p>
    some content here
  </p>
  <p>
    some content here
  </p>
  <p>
    some content here
  </p>
  <p>
    some content here
  </p>
  <p>
    some content here
  </p>
  <p>
    some content here
  </p>
</div>
</body>

CSS: CSS：

body {
  background: url(http://placekitten.com/200/300) no-repeat 0 0;
  margin: 0;
}

#header {
  position: fixed;
  width: 100%;
}

#body {
  padding-top: 20px;
}

JavaScript: JavaScript：

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 80 || document.documentElement.scrollTop > 80) { 
    document.getElementById("header").style.backgroundColor = "white";  
  } else {
    document.getElementById("header").style.backgroundColor = "transparent"; 
  }
}

I also made you a jsfiddle to check it out if this is what you need - https://jsfiddle.net/2gu7mb16/21/我还为您制作了一个 jsfiddle 来检查它是否是您需要的 - https://jsfiddle.net/2gu7mb16/21/

使用css或/和javascript将scoll上的标题从图像更改为纯色

问题描述

html: html：

css: css：

js: js：

1 个解决方案

解决方案1
0 2021-10-22 08:12:54

使用css或/和javascript将scoll上的标题从图像更改为纯色

问题描述

html: html：

css: css：

js: js：

1 个解决方案

解决方案1 0 2021-10-22 08:12:54

解决方案1
0 2021-10-22 08:12:54