개발일지 34 - 단축키 설정 2

정보 박스가 고정이 되어있어서 스크롤을 내릴때 같이 내려올 수 있게 위치정보를 바꿔주는 자바스크립트 코드를 구현했다. 

 

window.addEventListener('scroll', function() {
    const shortcutBox = document.querySelector('.shortcut-box');
    shortcutBox.style.top = (window.scrollY + 20) + 'px';  // 스크롤에 따라 박스 위치 조정
});

 

shortsubBox의 top값을 스크롤 할때 변경되는 위치값과 20을 더해서 같이 내려가게 구현했다. 

 

메인화면에는 sidebar 부분에 단축키 박스를 위치시켰다. 

 

<div class ="sidebar" style ="height: auto !important;">

    <div class="login-container">
    </div>
	
    <div class="shortcut-box">
	</div>
    
</div>

 

로그인 컨테이너 아래에 위치할 수 있게 배치했다. 

 

다크 모드에 대해 공부를 하고 있다.