How to set an element's background as the same as a specific portion of web page

Intro: I have a sticky header and a body which has linear gradient.

Goal: I'd like to set the header's background as the same of a specific area, that is to say where it initially sits on the top.

Solution tried: Using the dev tool color picker to find the first value on the top and the second value where the header ends.

Result: this works. In this way the header looks like is integrated and part of the body's linear gradient. It maintains its background as I scroll down the page.

Issue: If the page's height changes the body's linear gradient will be recalculated indeed. So now the header's background need a recalculation as well.

As I am new to programming I would appreciate any suggestion that can help me to solve this dynamically. Guess it's gonna be Javascript helping out.

Here I found a user with the same issue.

Thanks a lot for your time guys!

Instead of using a CSS background gradient, you can create a canvas with z-index -1 and the same size of your page. In the canvas you can render your gradient. This has the advantage, that you can query the canvas for the color at a specific position, which is not possible with the CSS background gradient. By this you can update the background color of your header, whenever a resize or scroll event occurs.

var canvas = document.getElementById ('background');
var ctx = canvas.getContext ('2d');
var header = document.getElementById ('header');

function scroll()
{
  var y = window.scrollY + header.getClientRects()[0].height;
  var rgba = ctx.getImageData (0, y, 1, 1).data;
  header.style.backgroundColor = 'rgba(' + rgba.join(',') + ')';
}

function draw()
{
  var colors = ['red', 'orange', 'yellow', 'green',
                'blue', 'indigo', 'violet'];
  var gradient = ctx.createLinearGradient (0, 0, 0, canvas.height);

  for (var i=0; i < colors.length; i++) {
    gradient.addColorStop (i/(colors.length-1), colors[i]);
  }

  ctx.fillStyle = gradient;
  ctx.fillRect (0, 0, canvas.width, canvas.height);

  scroll();
}

function resize()
{
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  draw();
}

window.addEventListener('resize', resize, false);
window.addEventListener('scroll', scroll, false);

resize();

body {
  height: 100rem;
  overflow: scroll;
  margin: 0;
}

canvas {
  display: block;
  height: 100%;
  width: 100%;
  z-index: -1;
  margin: 0;
}

#header {
  position: fixed;
  top: 0;
  left: 50%;
  right: 0;
  height: 50%;
  border-bottom: 1pt solid white;
}

<body>
  <canvas id="background"></canvas>
  <div id="header">
    Header
  </div>
  <script src="gradient.js"></script>
</body>

Recommended topics

Hot tags