리액트로 포트폴리오를 만드는 중에,
스크롤을 내리면 헤더가 사라지고 스크롤을 올리면 헤더가 보이는 기는을 추가하고 있었다.
삼항연산자를 이용하여
scrollMove ? { top: '-180px'} : { top: '0px' }
이런식으로 작성하여 성공!
근데 만들다보니 scrollY 값이 800 이상 일 때는
헤더의 배경색을 반투명색으로 주고,
아닐 때는 투명색으로 주고싶었다.
여러개의 스타일을 한꺼번에 적용하고 싶었..
해서 찾아보니, Object.assign(style1, style2, style3)을 사용하면
된다고 하여 아래와 같이 작성해주었다!
style={
Object.assign(
scrollMove ? { top: '-180px'} : { top: '0px' },
nowSc > 800 ? {backgroundColor:'rgba(255,255,255,0.7)',
boxShadow: '0 0 15px -5px rgba(0,0,0,0.2)' ,
backdropFilter: 'blur(5px)' } : {backgroundColor:'transparent'}
)
}삼항연산자를 우겨우겨 넣어 완성~
한 조건에 여러개 넣을 때는 ,를 이용해서 줄줄이 써주니 되었다.
🔽완성된 헤더🔽
(잘 안보여서 다시 수정해야 할 것 같기도 하고.. ㅠ)
