0

Есть логотип в шапке размеры 130x130, нужно чтобы при прокрутки страницы (до 500px) он уменьшался плавно пример:

129x129
128x128
127x127
.
.
.
50x50

как это можно сделать

1 ответ 1

2

При помощи события scroll, различных метрик для элементов и арифметики.

let minSize=50,
el=document.querySelector('div'),
page=document.querySelector('html'),
height={
  el:el.offsetHeight-minSize,
  page:500
}
document.addEventListener('scroll',()=>{
  let st=page.scrollTop
  if(st>=height.page) return
  let percent=height.page/st,
  value=height.el/percent
  el.style.height=height.el-value+minSize+'px'
})
body{
  height:2000px;
}
div{
  background:red;
  width:130px;
  height:130px;
  position:fixed;
}
<div></div>

1
  • как ещё и длину уменьшить, у вас только высота уменьшается
    – user315167
    4 фев 2019 в 10:39

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.