Как установить фон элемента так же, как указанную c часть веб-страницы - PullRequest
Новая
       54

Как установить фон элемента так же, как указанную c часть веб-страницы

2 голосов
/ 29 марта 2020

Введение: У меня есть липкий заголовок и тело с линейным градиентом.

Цель: Я бы хотел установить фон заголовка таким же определенной области c, то есть где она изначально находится сверху.

Решение проблемы: Использование палитры цветов инструмента dev для нахождения первого значения сверху и второе значение, где заканчивается заголовок.

Результат: это работает. Таким образом, заголовок выглядит интегрированным и является частью линейного градиента тела. Он сохраняет фон, когда я прокручиваю страницу вниз.

Проблема: Если высота страницы изменится, линейный градиент тела будет действительно пересчитан. Так что теперь фон заголовка также нуждается в пересчете.

Поскольку я новичок в программировании, я был бы признателен за любое предложение, которое может помочь мне решить это динамически. Думаю, это будет Javascript помощь.

Здесь я нашел пользователя с такой же проблемой .

Большое спасибо за ваше время, ребята!

1 Ответ

0 голосов
/ 29 марта 2020

Вместо использования CSS фонового градиента, вы можете создать холст с z-index -1 и таким же размером вашей страницы. На холсте вы можете визуализировать свой градиент. Это имеет то преимущество, что вы можете запросить холст для цвета в указанной позиции c, что невозможно при CSS градиенте фона. Этим вы можете обновлять цвет фона вашего заголовка всякий раз, когда происходит событие изменения размера или прокрутки. 

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>
...