Уменьшить размер логотипа для липкого заголовка в зависимости от положения прокрутки

Этот вопрос задавали здесь много раз, но я хочу сделать это по-другому, используя Vanilla Javascript, а не jQuery.

Мне нужно уменьшить размер логотипа в зависимости от положения прокрутки, но не внезапно. Добавление класса для уменьшения размера логотипа понятно, но я хочу, чтобы логотип увеличивался / уменьшался в зависимости от точного положения прокрутки.

При прокрутке вниз логотип должен иметь ширину не более 200 пикселей, а не 300 пикселей в ширину.

Когда пользователь прокручивает назад до определенной точки, логотип начинает увеличиваться до 300 пикселей, но по-прежнему в зависимости от положения прокрутки, а не мгновенно на основе точки.

Что-то похожее на это на Codepen: https://codepen.io/jonathanphz/pen/NAXRKG

var expandDiv = document.getElementById("expand");
var speed = 5;

function expanding() {
  var scrolltop = window.pageYOffset; // get number of pixels document has scrolled vertically
  var scrollAndSpeed = (scrolltop / speed);
  //Expand using transform
  //expandDiv.style.transform = "scalex( " + Math.min(Math.max(scrollAndSpeed, 1), 10) + ")";
  
  //Or using width
  expandDiv.style.width = Math.min(Math.max(scrollAndSpeed, 20), 95) + "%";

}

window.addEventListener('scroll', function() { // on page scroll
  requestAnimationFrame(expanding); // call parallaxing()
}, false);```