[JavaScript]스크롤 이벤트(Scroll)
네브바 스크롤 이벤트
스크롤 시에 네브바의 UI를 변경하는 애니메이션을 추가한다.
네브바 html
<div class="nav-menu">
<p>Shirts Studio</p>
<p id="nav-btn">Products</p>
</div>
네브바 CSS 속성 추가
.nav-menu{
display: flex;
justify-content: space-between;
padding: 15px;
align-items: center;
background-color: transparent;
position: fixed;
z-index: 5;
width: 100%;
height: 70px;
font-size: 22px;
transition: all 0.5s;
}
.nav-action{
background-color: #000;
color: #fff;
font-size: 20px;
height: 40px;
}자바스크립트 스크롤 이벤트 넣기
$(window).on("scroll",function(){
if( $(window).scrollTop() > 100){
$(".nav-menu").addClass("nav-action");
}else {
$(".nav-menu").removeClass("nav-action");
}
});
[JavaScript]부트스트랩(Bootstrap) 활용하기 - 모달창, 네브바, 로그인부트스트랩을 활용하여 웹 사이트에서 자주 사용하는 모달창과 네브바, 로그인 창을 만들어보자....
