JQuery scroll event

2020/JQuery 2020. 3. 4. 20:55
반응형
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>scroll demo</title>
    <style>
      div {
        color: blue;
      }
      p {
        color: green;
      }
      span {
        color: red;
        display: none;
      }
    </style>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
      $(window).scroll(function() {
        $("span")
          .css("display", "inline")
          .fadeOut("slow");
      });
    </script>
  </head>
  <body>
    <div>화면을 작게 만들어서 스크롤을 움직여보세요..</div>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
    <p>스크롤을 움직이면 무엇인가 나타날까? - <span>내가 나타나지롱</span></p>
  </body>
</html>
반응형

'2020 > JQuery' 카테고리의 다른 글

JQuery change  (0) 2020.03.04
JQuery window.resize  (0) 2020.03.04
JQuery 글자수 제한 (keyup, textarea, length)  (0) 2020.03.04
JQuery event.stopPropagation();  (0) 2020.03.03
JQuery event.preventDefault, 기본 이벤트 제거  (0) 2020.03.03
블로그 이미지

꽃꽂이하는개발자

,