Life is an egg.

닫기 검색결과 전체 보기

    스크롤 위치를 인식하여 나타나는 상단바

    iTIPs/Web 2014. 9. 14. 23:49

    CodePen에서 현재 스크롤 위치를 인식하는 코드를 찾다가 발견했습니다.


    먼저 스크롤 위치를 퍼센트로 나타내려면 다음처럼 jQuery를 사용하면 됩니다.

    $(window).scroll(function(){

      scrollPercent = ($(window).scrollTop()/ ($(document).height()-$(window).height())) * 100;

    });


    다음은 이를 응용해 70% 스크롤을 했을 때 숨어있던 상단바가 내려오는 예제입니다.

    70%이상 스크롤하면 상단바가 내려옵니다.

    See the Pen Scroll detection by Kim young wook (@nubiz) on CodePen.



    반면 현재 이 블로그에는 조금 다른 방식의 모바일 상단바가 적용되어있는데요.


    스크롤을 내리면 사라졌다가 다시 조금 올리면 상단바가 나타납니다.


    이런 방식의 상단바는 다음 링크를 참조해주세요.

    아래로 스크롤하면 사라졌다가 위로 스크롤하면 나타나는 상단바


    저작자표시비영리동일조건
    'iTIPs/Web' 관련 글 more
    • thumbnail
      쿠키(Cookie) vs. 로컬스토리지(Local Storage) 2014.10.29
    • thumbnail
      Disqus 댓글 갯수 표시하는 방법 2014.09.15
    • thumbnail
      바이두클라우드 공유받은 링크에서 다운로드 받기 2014.09.03
    • thumbnail
      Addthis 플러그인 교체하다 - Addthis 업데이트 된 적용방식 2014.07.05
    Posted by 뭐하라

    문제가 있나요?(?)

    내용상 오류가 있음 업데이트 필요 화면이 깨짐 기타 수정이 필요함
    • BlogIcon CRISPR
      2014.09.19 21:54 신고

      적용했습니다~ 좋은 내용 감사합니다! ^^

    • BlogIcon 꾸러기밤바
      2014.12.15 14:45 신고

      너무좋네요 ^^ 좋은팁 감사드립니다.
      평소에 쓰던 스크립트보다 더 좋아보여서 쓰고있는데요
      IE7에서만 상단바로 지정하면 위쪽여백이 조금 더 올라가서 따로놀고
      하단바로 지정하면 아래쪽 여백이 더 내려가서 따로노는현상이있는데요.
      이부분은 해결방법이 없을까요?


      • BlogIcon 뭐하라
        2014.12.15 15:48 신고

        죄송하지만 이코드는 제가만든것도 아니고, IE7은 디버깅이 어려워서 해결이 어렵겠네요 ㅠㅠ

      • BlogIcon 꾸러기밤바
        2014.12.15 16:19 신고

        아닙니다 지원하는것만으로도 감사해야죠 ㅋㅋ
        항상 글 잘보고있습니다. 잘쓰겠습니다.

    • 허경민
      2020.09.27 16:27

      너무 좋은 코드 감사합니다. 한가지 문의 드려요. 혹시 소수점 뒷 숫자 없에는 법은 없을까요?

이전페이지
더 보기
다음페이지

공지사항

  • thumbnail 스킨 후원 및 혜택 안내
  • thumbnail 바이두 클라우드 검색 엔진

추천 포스트

  • thumbnail Material T Skin Mark5+ 다운로드
  • thumbnail 애드센스 반응형 고급코드 수정 도우미
  • thumbnail A/B TEST 스크립트 생성기

    최근...

  • 포스트
  • 댓글
  • thumbnail reMarkable 2 개봉기 (2)
  • thumbnail Material T skin 시간표시 업데이트 (2)
  • thumbnail 카카오톡 kakaotalk v8.5.1 apk 다⋯ (1)
  • thumbnail 라즈베리파이 puppeteer 구동하기
  • thumbnail 티스토리 메뉴버튼 위치 수정하기 (1)
  • 더 보기
  • thumbnail 안녕하세요
    🧸POOH-goalkeeper ㆍ 02.02
  • thumbnail 참쌤이누군지모르겠는데 조용히해⋯
    뭐하라 ㆍ 01.29
  • thumbnail https://open.kakao.com/o/gReRS9P⋯
    jmpark ㆍ 01.09
  • thumbnail 잘 배우고 갑니다...
    이별유예 일주일 ㆍ 2020
  • thumbnail 정말 감사합니다. 감사히 잘 쓰겠⋯
    M_Falcon ㆍ 2020

후원을 기다립니다.

Life is an egg에서는 여러분의 후원을 기다리고 있습니다.

후원 안내

카테고리

분류 전체보기 (728)
iTIPs (342)
유용한 프로그램 (37)
유용한 사이트 (30)
안드로이드 (62)
Web (27)
Computer (28)
광고 (45)
티스토리 (57)
Material T Skin (31)
기타 팁 (25)
Reviews (63)
APK저장소 (165)
카카오톡 (82)
일반 APK (83)
기타 (36)
게임 (123)
쿠타 (4)
splice 공략 (11)
Bad Piggies 공략 (96)
기타게임 (12)
  • 홈
  • 방명록
  • Material T skin 다운로드
  • OctoPrint 한국어
  • 링크추가
뭐하라's Blog is powered by daumkakao
Skin info material T Mark5+ by 뭐하라
favicon

Life is an egg.

삶은 달걀이다.

  • 분류 전체보기 (728)
    • iTIPs (342)
      • 유용한 프로그램 (37)
      • 유용한 사이트 (30)
      • 안드로이드 (62)
      • Web (27)
      • Computer (28)
      • 광고 (45)
      • 티스토리 (57)
      • Material T Skin (31)
      • 기타 팁 (25)
    • Reviews (63)
    • APK저장소 (165)
      • 카카오톡 (82)
      • 일반 APK (83)
    • 기타 (36)
    • 게임 (123)
      • 쿠타 (4)
      • splice 공략 (11)
      • Bad Piggies 공략 (96)
      • 기타게임 (12)

카테고리

  • 홈
  • 방명록
  • Material T skin 다운로드
  • OctoPrint 한국어
  • 링크추가

관리자 메뉴

  • 관리자 모드
  • 글쓰기
PC화면 보기 티스토리 Daum

티스토리툴바