Diminuir imagem topo ao rola página

[Luckas 0]

Olá pessoal;

 

Alguém sabe onde posso encontrar ou como fazer a imagem no topo do site diminuir ao rolar a barra de rolagem?

Acho q exemplo de como isso faz é no whatsapp, quando vc ve a foto de perfil da pessoa, parece que a imagem vai subindo enquanto o espaço de visualização dela diminui também.

 

Agradeço desde já.

 

 

[Marco Bruno 19]

Olá, Luckas.

Você vai precisar de um JS para adicionar uma classe quando o scroll chegar a um determinado ponto. Conforme exemplo abaixo:

(function (window, document) {
  'use strict';

  var $header = document.getElementById('header');

  window.addEventListener('scroll', function () {
  var positionScrollTop = window.pageYOffset;

    if (positionScrollTop >= 344) {
      if (!$header.className.match('header')) { $header.classList.add('fixed') };
    } else {
      $header.classList.remove('fixed');
    };
  });
})(window, document);

Neste exemplo é adicionado a class fixed quando o scroll for maior ou igual a 344.

 

[]'s

Marco Bruno.