标题位置：粘性背景颜色问题

Question

The background of the page is a linear-gradient and the headers have position: sticky . As the page gets scrolled down the header is overlapping the image with its background being transparent but I want the header background to have the same linear-gradient scheme as that of the page. Thanks in advance

Current -

Expected -

code - https://jsfiddle.net/wveufyn2/3/

[EDIT] We cant add the same linear-gradient to the header as its out of sync with the overall color scheme.

Answer 1

如果您想随位置移动此标题：粘性

position: fixed;

Answer 2

html {
  background: linear-gradient(218.78deg, #20233A 33.97%, #3A2034 100.71%);
  width: 100%;
  background-attachment: fixed;
}
.flex.spaceBetween {
  justify-content: space-between;
  background: linear-gradient(218.78deg, #20233A 33.97%, #3A2034 100.71%);
  background-attachment: fixed;
}

Done.