감지2 [jQuery] 스크롤(scroll) 방향 감지 이벤트 제이쿼리(jQuery)를 이용하여 스크롤(scroll) 감지 이벤트 만들기 스크롤 방향에 따라 헤더(header) 숨김/표시 예시 [html] header [css] header{ position: fixed; width: 100%; height: 100px; background: pink; } main{ width: 100%; height: 1000px; background: skyblue; } [js] let lastScroll = 0; // 초기 스크롤 위치 $(window).scroll(function(){ let nowScroll = $(this).scrollTop(); // 현재 스크롤 위치 if (nowScroll > lastScroll) { // 스크롤 위치 증가 $('header').st.. 2023. 6. 14. [jQuery] 스크롤(scroll) 위치 감지 이벤트 제이쿼리(jQuery)를 이용하여 스크롤(scroll) 감지 이벤트 만들기 스크롤 시 배경색 변경 예시 [html] main menu [css] .menu{ position: fixed; top: 0; width: 100%; height: 40px; background: pink; } .menu.active{ background: blue; color: #fff; } .container{ width: 100%; height: 800px; } [js] $(document).on('scroll', function(){ if($(window).scrollTop() > 100){ $('.menu').addClass('active'); }else{ $('.menu').removeClass('active'); } .. 2023. 6. 2. 이전 1 다음 728x90
