Turn if/else statement into ternary operator

Question

How would you turn this if else statement into ternary operator? I know it would read better with an if else statement, I'm just curious

Thank you.

if (window.scrollY > 200) {
        header.style.padding= "5rem";
        header.style.boxShadow="0 0.4px 10px 1px #999";
    } else {
        header.style.padding= "1rem";
        header.style.boxShadow="none";
        })
    }

Answer 1

It's pretty trivial...

header.style.padding = window.scrollY > 200
  ? "5rem"
  : "1rem";
header.style.boxShadow = window.scrollY > 200
  ? "0 0.4px 10px 1px #999"
  : 'none';

But rather than setting these manually with JavaScript (using the conditional operator or anything else), consider toggling CSS classes instead, eg

.header {
  padding: 1rem;
  box-shadow: 'none';
}
.header.scrolled {
  padding: 5rem;
  box-shadow: 0 0.4px 10px 1px #999;
}

header.classList.toggle('scrolled', window.scrollY > 200);

Answer 2

if (window.scrollY > 200) {
    header.style.padding= "5rem";
    header.style.boxShadow="0 0.4px 10px 1px #999";
} else {
    header.style.padding= "1rem";
    header.style.boxShadow="none";

to ternary

window.scrollY > 200 ?
  ( header.style.padding= "5rem",
    header.style.boxShadow="0 0.4px 10px 1px #999" )
:
  ( header.style.padding= "1rem",
    header.style.boxShadow="none" );