• Q&A
  • 회원가입
  • 로그인

[Event] JQ - scroll() 메서드 ★★★ - 스크롤 이벤트를 부착/촉발 (jquery, scroll, event) ※ 스크롤높이감지 (= 상단높이감지 = 상단좌표감지 = scroll메서드 = 스크롤 메서드)

1,685  

목차

  1. scroll() 예제 - 스크롤 이벤트 발생 횟수
  2. scroll() 정의
  3. scroll() 구문
  4. scroll() 예제 - 스크롤 높이 감지해 (클래스・스타일) 추가/삭제
  5. scroll() 예제 - 스크롤 높이 감지해 서서히 노출/제거

 

scroll() 예제 - 스크롤 이벤트 발생 횟수

 

<style>

div {

    border:1px solid black;

    width:200px;

    height:100px;

    overflow:scroll;

}

p {

    height:300px;

}

</style>

  

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

x = 0;

$(document).ready(function(){

    $("div").scroll(function(){

        $("span").text( x+= 1);

    });

});

</script>


<div>

  <p>홈짱닷컴 (Homzzang.com)</p>

</div>

<p>스크롤 횟수 : <span>0</span> 번</p> 


결과 보기

 

scroll() 정의

 

 scroll 이벤트는 지정 요소에서 스크롤할 때 발생.

 

※ scroll() 메서드는 아래 2가지 역할 수행 가능.

  1. scroll 이벤트 촉발.
  2. scroll 이벤트 발생 시 실행할 함수 부착.

 


 

※ scroll 이벤트는 스크롤 가능한 요소와 window 객체에서 발생 가능. 

 

 

scroll() 구문

 

scroll 이벤트 촉발.

$(selector).scroll()

 

scroll 이벤트에 함수 부착

$(selector).scroll(function)

 


[매개변수]

 

function

선택. scroll 이벤트 발생 시 실행할 함수 지정.

 

 

scroll() 예제 - 스크롤 높이 감지해 (클래스・스타일) 추가/삭제

[예제1]

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function() {

  $(window).scroll(function() {

    if ($(document).scrollTop() > 50) {

      $("p").addClass("hz");

    } else {

      $("p").removeClass("hz");

    }

  });

});

</script>

<style>

.hz {background-color: yellow;}

</style>


<body style="height:1550px;">

<p>홈짱닷컴 Homzzang.com</p>

<p style="position:fixed;">그누보드/영카트 강의.</p>

</body>

 

결과보기


[예제2]

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $(window).scroll(function(){

        var scroll = $(window).scrollTop();

        if (scroll > 300) {

            $("P").css("background" , "yellow");

        } else {

            $("P").css("background" , ""); 

        }

    });

})

</script>

<style>

.hz {background-color: yellow;}

</style>


<body style="height:1550px;">

<p>홈짱닷컴 Homzzang.com</p>

<p style="position:fixed;">그누보드/영카트 강의.</p>

</body>

 

결과보기 

 

scroll() 예제 - 스크롤 높이 감지해 서서히 노출/제거

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>

$(window).scroll(function(){

    if ($(this).scrollTop() > 250) {

        $('P').fadeIn();

    } else {

        $('p').fadeOut();

    }

});

</script>

<style>

p {display:none; position:fixed;}

</style>


<body style="height:1550px;">

<p>홈짱닷컴 Homzzang.com<br>그누보드5/영카트5 강의.</p>

</body>

 

결과보기



찾아주셔서 감사합니다. Since 2012