스크롤5 [jQuery] 특정 위치(화면 위치)에서 스크롤 이벤트 스크롤 시 화면이 특정 위치에 도달했을 때 이벤트 발생 화면의 1/2 지점과 2/3 지점에 div가 도달했을 때 배경색 변경 예시 [html] 아래로 스크롤 화면의 1/2 지점에서 이벤트 발생 화면의 2/3 지점에서 이벤트 발생 [css] div { width: 100%; height: 700px; font-size: 2rem; text-align: center; } .scroll-12 { background: pink; } .scroll-23 { background: skyblue; } [js] // 화면의 1/2값과 2/3값 변수 할당 let scrollVh12 = $(window).innerHeight() * 1 / 2; let scrollVh23 = $(window).innerHeight() * .. 2023. 8. 14. [jQuery] 팝업(popup) / 모달(Modal) 시 스크롤 비활성화 (iOS 포함 모든 기기) 팝업(popup)이나 모달(modal) 사용 시 바디의 스크롤(scroll)을 비활성화 하는 방법 iOS(아이폰)를 포함한 모든 기기에 대응 [html] section1 section2 popup popup toggle [css] *{ margin: 0; padding: 0; } body { width: 100%; } section { height: 600px; } .section1 { background: yellowgreen; } .section2 { background: skyblue; } .popup { display: none; position: fixed; left: 0; top: 0; width: 80%; height: 80vh; background: violet; } .popup.activ.. 2023. 7. 25. [jQuery] 아이폰(iOS) 사파리 바운스 스크롤(bounce scroll) 대응 헤더 제이쿼리(jQuery)를 이용하여 아이폰(iOS) 사파리 바운스 스크롤(bounce scroll) 감지 대응하기 스크롤 방향에 따라 헤더(header) 숨김/표시 처리를 하여도 아이폰(iOS)의 사파리에서 상단으로 이동할때 바운스 스크롤 이펙트가 작동하면 스크롤 위치가 마이너스로 인식되어 헤더가 표시되지 않는다. 문제는 상단에서 바운스 스크롤 이펙트가 작동하고 있을때와 이펙트가 종료되었을 때 모두 헤더가 표시되지 않는다. 해결 방법은 기존 방향 감지 이벤트에서 스크롤 위치가 마이너스라도 헤더가 표시될 수 있게만 추가하면 된다. [js] let lastScroll = 0; $(window).scroll(function(){ let nowScroll = $(this).scrollTop(); if (lastS.. 2023. 6. 16. [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
