메뉴 활성화되면 뒷배경 스크롤 막기

hyesukHan·2023년 10월 31일

메뉴창이 활성화되면 뒷배경의 스크롤을 막아주었다.

html

    $('.header-top .menu').click(function(){
      $('.side-nav').addClass('on');
      $('body').addClass('hidden');
    })

    $('.side-nav .btn-close,.dimmed').click(function(){
      $('.side-nav').removeClass('on');
      $('body').removeClass('hidden');
    })

메뉴버튼클릭하면 body에 hidden클래스를 넣어준다.

css

.hidden{
    overflow: hidden;
}

body에 hidden일때 overflow:hidden을 걸어주면 스크롤이 내려가지 않는다!

0개의 댓글