728x90 300x250 SMALL 전체 글1109 스크롤하면 해당 메뉴에 클래스 붙여서 효과주기 스크롤 했을때 해당 페이지에 위치해 있음을 확인 할 수 있도록 고정된 메뉴에 클래스를 붙여서 효과를 줄 수 있다. 예를 들면 이런식으로 클릭한 페이지를 클릭하거나 스크롤 되었을때 해당 메뉴에 클래스를 붙여줘서 스타일을 다르게 적용시켜준다. 123456789 HOME PORTFOLIO SKILLS ABOUT CONTACT Colored by Color Scriptercs 메뉴를 이렇게 넣었다면 12345678910111213141516171819202122232425 $(window).on('scroll', function () { var pos = $(window).scrollTop(); var pos2 = pos + 50; var scrollBottom = pos + $(window).height();.. 2018. 12. 7. 부드러운 페이지 스크롤 적용하기 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. css선언 순서에 대한 고찰 예전에 웹표준 관련 자료에서 본 것을 토대로 큰것에서부터 세부적으로 css를 적용시키기는 하는데 막상 작업 하다보면 급한대로 정리 안하고 하게 되는듯 갑자기 다른 분들은 어떻게 작업하시나 궁금해서 찾아봤는데 어떤분은 알파벳순으로 정리한다 그러고 레이아웃에 가까운 순서로 작업한다 그러고 대중은 없는듯 ▶ 모질라 파이어폭스 css 선언 순서 display list-style position float clear width/height padding/margin border/background color/font text/decoration test-align/vertical-align white-space other text content ▶ NHN 마크업 CSS 선언순서 1. 레이아웃 display, vi.. 2018. 12. 5. 제이쿼리 :: 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. 이전 1 ··· 270 271 272 273 274 275 276 ··· 278 다음 728x90 반응형 LIST
