728x90 300x250 javaScript/JS Examples47 부드러운 페이지 스크롤 적용하기 smooth scroll :: 제이쿼리 부드럽게 내려가는 스크롤 스크립트 구하는 것은 어렵지 않다. 검색창에 smooth scroll이라고만 쳐도 많은 정보를 얻을 수 있다. https://idiotwu.github.io/smooth-scrollbar/ https://github.com/kswedberg/jquery-smooth-scroll 나는 그 중에서 github에서 다운 받은 부드러운 스크롤을 적용해봤다.위 주소에서 받을 수 있다. 압축된 파일을 풀어보면 demo폴더가 있다.거기서 index를 열어보면 위와 같은 화면이 p1버튼을 눌러 부드럽게 내려가는 것을 확인 할 수 있다.그래서 이 파일과 연결된 파일 12345678910111213141516 $(document).ready(function() { $('body').smoothSc.. 2018. 12. 6. 제이쿼리 :: height값 구하기 하고 높이 값에 따른 메뉴바 변 지난번에 기록했던 특정위치의 높이 값까지 스크롤바를 내렸을 경우 클래스 추가해주는 스크립트 123456789101112131415 $(function(){ $(window).scroll(function(){ var navbar = $(this).scrollTop(); console.log(navbar); var $header = $('header'); if(navbar > 860){ $header.addClass('activated'); }else{ $header.removeClass('activated'); } }) }) Colored by Color Scriptercs 여기서 추가해서 이번에는 특정 엘리먼트의 높이 값을 구하고 그 값만큼의 위치까지스크롤바를 내렸을 경우 클래스가 추가되도록 바꿔보자 제.. 2018. 12. 4. 헤더 상단에 내비게이션 바 스크롤 시에 배경 변화 주기 header 내비게이션 바 스크롤 내렸을때 특정 위치에서 클래스 넣어주는 스크립트 1234567891011121314 $(function(){ $(window).scroll(function(){ var navbar = $(this).scrollTop(); console.log(navbar); var $header = $('header'); if(navbar > 860){ $header.addClass('activated'); }else{ $header.removeClass('activated'); } }) }) Colored by Color Scriptercs 스크롤을 내릴경우 스크롤 값이 navbar 변수에 저장된다.헤더 값은 header 변수에 저장된다.navbar값이 860보다 클 경우헤더에 act.. 2018. 12. 2. 이전 1 ··· 9 10 11 12 다음 728x90 반응형
