sticky header event methods

c0ng·2022년 10월 21일
0

방법 1. materialize cdn 이용하여 구현(jquery)

$(document).ready(function(){
	$(window).scroll(function(){
    	if($(window).scrollTop()>300){
        	$('nav').addClass('red');
            }else{
            $('nav').removeClass('red)'}
    })	
})

방법 2. pure javaScript

window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

방법 3. pure javaScript 2
오 이분꺼 보고 따라해봐야겠다..

profile
농부 대장님 아래서 일하는 잡초

0개의 댓글

관련 채용 정보