Control HTML element's style on scroll with window.scrollY-CodePudding

I'm trying to change font-size and margin-bottom of a div element when scrolling using window.addEventListener('scroll', function(){}); and window.scrollY value. But I don't want it to change forever if I don't stop scrolling. I only want to reduce the font-size from 256px to about 192px and margin-bottom to about 128px. Can you guys please show me how to control it? Sorry I just started JS for couple days. Below is the part of my code.

let brownie = document.getElementById('backgroundBrownie');
window.addEventListener('scroll', function() {
  let value = window.scrollY;
  brownie.style.fontSize = 256 - value / 4   'px';
  brownie.style.marginBottom = value   'px';

})

<div >
  <div  id="backgroundBrownie">
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
  </div>
</div>

CodePudding user response：

        let value = window.scrollY;
        let fontSize = 256 - value/4;
        brownie.style.fontSize = fontSize < 192 ?  '192px' : fontSize   'px';
        let marginBottom = value;
        brownie.style.marginBottom = marginBottom < 128 ?  '128px' : marginBottom   'px';

These inline ternary operators check if the value is less than your limit. If it is, it the property is set to the limit. If not, it uses the computed value.

CodePudding user response：

Simply check the value you have computed with an if and else if statement.

At present, this seems quite jerky. I suspect your algorithm needs refining.

let brownie = document.getElementById('backgroundBrownie');
window.addEventListener('scroll', function() {
  let value = window.scrollY;
  
  let fontSize = 256 - value / 4;
  if(fontSize < 192)
    fontSize = 192;
  else if(fontSize > 256)
    fontSize = 256;
    
  let marginBottom = value;
  if(marginBottom > 128)
    marginBottom = 128;
    
  brownie.style.fontSize = fontSize   'px';
  brownie.style.marginBottom = marginBottom   'px';

})

<div >
  <div  id="backgroundBrownie">
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
    Brownie<br />
  </div>
</div>

CodePudding user response：

brownie.style.fontSize = (256 - value/4 >= 192) ? (256 - value/4 'px') : '192px';

brownie.style.marginBottom = (value >= 128) ? (value 'px') : '128px';

You can also store the values in a temporary variable first.