모바일 사파리에서 고정 포지셔닝

StackOverflow https://stackoverflow.com/questions/743123

문제

모바일 사파리의 뷰포트에 비해 고정 된 요소를 배치 할 수 있습니까? 많은 사람들이 지적했듯이 position: fixed 작동하지 않지만 Gmail에는 거의 내가 원하는 솔루션이 나왔습니다. 메시지보기의 떠 다니는 메뉴 표시 줄을 참조하십시오.

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

도움이 되었습니까?

해결책

iOS 5가 있습니다 위치 지원 : 고정.

다른 팁

이 고정 위치 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 고정 위치에 의존하는 코드를 수정합니다"그리고 애플이 고정 위치를 정적으로 처리하기로 결정한 이유가 매우 좋은 이유가 있음을 알게 될 것입니다.

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

내가 본 최고의 솔루션은 Doctyper.

요소를 사용하는 더 간단한 jQuery 솔루션 : 링크

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

iOS 장치에서 예제를보십시오 http://neave.github.com/touch-scroll/

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

이것이 내가 한 방법입니다. 페이지를 내 아래로 스크롤하면 '스틱'을 창 상단으로 스크롤하면 헤더 아래에있는 NAV 블록이 있습니다. 위로 다시 스크롤하면 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"/>

또한 확인하십시오 height=device-height 이 메타 태그에 존재하지 않으면 일반적으로 페이지에 존재하지 않는 추가 바닥 글 패딩을 방지합니다. Menubar 높이는 뷰포트 높이에 추가되어 고정 된 배경이 스크롤 할 수있게됩니다.

여기에서 (모바일) 브라우저가 CSS 위치 고정 + 버전을 지원하는 것을 볼 수 있습니다.

http://caniuse.com/css-fixed

웹 앱에는 고정 헤더가 필요합니다. 우리는 최신 브라우저 만 지원해야한다는 점에서 운이 좋았지만이 분야에서 Safari의 행동으로 인해 실제 문제가 발생했습니다.

다른 사람들이 지적했듯이 가장 좋은 수정은 우리 자신의 스크롤 코드를 작성하는 것입니다. 그러나 우리는 iOS에서만 발생하는 문제를 해결하려는 노력을 정당화 할 수 없습니다. 애플 이이 문제를 해결할 수 있기를 희망하는 것이 더 합리적이다.

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

우리를 위해 일한 것은 사용자가 확대했는지 여부에 따라 "위치 : 고정"과 "위치 : 절대"사이를 전환하는 것입니다. 이것은 우리의 "플로팅"헤더를 예측 가능한 동작으로 대체하며, 이는 유용성에 중요합니다. 확대되면 동작은 우리가 원하는 것이 아니지만 사용자는 줌을 뒤집어 쉽게 작업 할 수 있습니다. 

// 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";
    });
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top