Mobile Safari의 고정 위치

Mobile Safari의 고정 위치

---

Mobile Safari에서 뷰포트를 기준으로 고정 된 요소를 배치 할 수 있습니까? 많은 사람들이 언급했듯이 position: fixed작동하지 않지만 Gmail은 내가 원하는 거의 모든 솔루션을 제공했습니다. 메시지보기의 플로팅 메뉴 표시 줄을 참조하십시오.

JavaScript에서 실시간 스크롤 이벤트를 얻는 것도 합리적인 솔루션입니다.

---

iOS 5는 position : fixed를 지원합니다 .

---

이 고정 위치 div는 스크롤 할 때 div를 페이지 하단으로 이동하는 단 2 줄의 코드로 달성 할 수 있습니다.

window.onscroll = function() {
  document.getElementById('fixedDiv').style.top =
     (window.pageYOffset + window.innerHeight - 25) + 'px';
};

---

이 문제에 대한 Google의 솔루션을 참조하십시오 . 기본적으로 JavaScript를 사용하여 콘텐츠를 직접 스크롤해야합니다. Sencha Touch 는 또한 매우 성능이 뛰어난 저택에서 이러한 동작을 얻기위한 라이브러리를 제공합니다.

---

그것은 나를 위해 일했습니다.

function changeFooterPosition() {   
  $('.footer-menu').css('top', window.innerHeight + window.scrollY - 44 + "px");
}

$(document).bind('scroll', function() {
  changeFooterPosition();
});

(44는 내 바의 높이입니다)

바는 스크롤의 끝에서만 움직이지만 ...

---

관심이있을 수 있습니다. Apple Dev 지원 페이지입니다.
http://developer.apple.com/library/ios/#technotes/tn2010/tn2262/

" 4. CSS 고정 위치 지정에 의존하는 코드 수정 "요점 을 읽으면 Apple이 만든 이유가 매우 타당하다는 것을 알게 될 것입니다. 고정 된 위치를 정적으로 처리하려는 의식적인 결정.

---

나는 Gmail이 타이머의 스크롤 위치를 추적하고 div그에 따라 재배치한다고 생각 합니다.

내가 본 최고의 솔루션은 doctyper 입니다.

스크롤시 요소를 이동하는 더 간단한 jQuery 솔루션 : 링크

---

모바일 Safari에서 고정 요소로 스크롤을 모방하는 jQuery 플러그인 인 touch-scroll을 사용해 볼 수 있습니다. https://github.com/neave/touch-scroll

http://neave.github.com/touch-scroll/ 에서 iOS 기기의 예를 확인하세요.

또는 대안은 iScroll입니다 : http://cubiq.org/iscroll

---

이것이 내가 한 방법입니다. 페이지를 아래로 스크롤하면 창 상단에 '고정'되면 헤더 아래에 탐색 블록이 있습니다. 위로 스크롤하면 nav는 내가 사용하는 위치로 돌아갑니다. 비 모바일 플랫폼 및 iOS5의 경우 CSS에서 고정됩니다. 다른 모바일 버전은 설정되기 전에 화면이 스크롤을 멈출 때까지 '지연'이 있습니다.

// css
#sticky.stick {
    width:100%;
    height:50px;
    position: fixed;
    top: 0;
    z-index: 1;
}

// jquery 
//sticky nav
    function sticky_relocate() {
      var window_top = $(window).scrollTop();
      var div_top = $('#sticky-anchor').offset().top;

      if (window_top > div_top)
        $('#sticky').addClass('stick');
      else
        $('#sticky').removeClass('stick');
     }

$(window).scroll(function(event){

    // sticky nav css NON mobile way
       sticky_relocate();

       var st = $(this).scrollTop();

    // sticky nav iPhone android mobile way iOS<5

       if (navigator.userAgent.match(/OS 5(_\d)+ like Mac OS X/i)) {
            //do nothing uses sticky_relocate() css
       } else if ( navigator.userAgent.match(/(iPod|iPhone|iPad)/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) ) {

            var window_top = $(window).scrollTop();
            var div_top = $('#sticky-anchor').offset().top;

            if (window_top > div_top) {
                $('#sticky').css({'top' : st  , 'position' : 'absolute' });
            } else {
                $('#sticky').css({'top' : 'auto' });
            }
        };

---

<meta name="viewport" content="width=320, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 

Also making sure height=device-height is not present in this meta tag helps prevent additional footer padding that normally would not exist on the page. The menubar height adds to the viewport height causing a fixed background to become scrollable.

---

Here you can see what (mobile) browsers support css position fixed + there version.

http://caniuse.com/css-fixed

---

Our web app requires a fixed header. We are fortunate in that we only have to support the latest browsers, but Safari's behavior in this area caused us a real problem.

The best fix, as others have pointed out, is to write our own scrolling code. However, we can't justify that effort to fix a problem that occurs only on iOS. It makes more sense to hope that Apple may fix this problem, especially since, as QuirksMode suggests, Apple now stands alone in their interpretation of "position:fixed".

http://www.quirksmode.org/blog/archives/2013/12/position_fixed_1.html

What worked for us is to toggle between "position:fixed" and "position:absolute" depending on whether the user has zoomed. This replaces our "floating" header with predictable behavior, which is important for usability. When zoomed, the behavior is not what we want, but the user can easily work around this by reversing the zoom.

// On iOS, "position: fixed;" is not supported when zoomed, so toggle "position: absolute;".
header = document.createElement( "HEADER" );
document.body.appendChild( header );
if( navigator.userAgent.match( /iPad/i ) || navigator.userAgent.match( /iPhone/i )) {
    addEventListener( document.body, function( event ) {
        var zoomLevel = (( Math.abs( window.orientation ) === 90 ) ? screen.height : screen.width ) / window.innerWidth;
        header.style.position = ( zoomLevel > 1 ) ? "absolute" : "fixed";
    });
}

참고URL : https://stackoverflow.com/questions/743123/fixed-positioning-in-mobile-safari