SUNKYUN.COM

웹사이트 상단의 네비게이션 또는 헤더가 fixed 가 됐다가 다시 풀리는 기능중

$(window).scroll event 를 사용했었는데

안드로이드의 경우는 터치 도중에도 fixed 가 먹히는데

iOS 의 경우엔 touchend 가 되서야 계산이 되서 fixed 가 먹힌다.

구글링을 해보니, iOS 의 경우에는 touchmove event 를 주면 터치 도중에도 먹힌다는 사실을 앎.

touchend 사용법,

$(document).on({

touchmove: function() {

functionName();

},

scroll: function() {

functionName();

}

});

$(document).on({

touchmove: function() {

functionName();

},

scroll: function() {

functionName();

}

});

======================================================

$(window).scroll(function(){

hasScrolled();

}).on("touchmove", function () {

hasScrolled();

});

document.addEventListener("touchmove", hasScrolled, false);

document.addEventListener("scroll", Scroll, false);

function ScrollStart() {

//start of scroll event for iOS

//alert("touchmove");

}

function Scroll() {

//end of scroll event for iOS

//and

//start/end of scroll event for other browsers

alert("Scroll");

}

또한 safari 와 firefox 상위 버전에서만 먹히는

position : sticky 가 있는데 특정 영역에 sticky 값을 넣어주면

페이지 상단으로 스크롤이 이루어져 있을 때 영역이 상단에 고정되고 다시 풀린다.

사실 이게 가장 베스트 인거 같다.

예제는,

https://developer.mozilla.org/en-US/docs/Web/CSS/position

userAgent 를 체크해서 iOS 일때, sticky 클래스를 추가하는 방법으로 iOS에서 fixed 를 시킬 수 있음.

출처 : http://hellomrma.com/wp/?p=438

참고자료 : https://blog.outsider.ne.kr/971