2013-09-27 1 views
0

페이지 아래쪽에있는 탭 탐색 모음이있는 웹 페이지가 있습니다. 페이지가 반응하기 때문에 창 높이와 너비가 변경 될 수 있습니다. 내 코드는 데스크톱 환경에서 잘 작동하지만 내 iPhone 또는 iPad에서이 코드를 가져 오면 $(window).scroll 함수의 응답 속도가 느립니다. 아래로 스크롤하여 화면이 스크롤을 멈출 때만 내 기능이 작동합니다. 내 고정 탐색 지연이 나타나거나 사라집니다. 어떤 제안? 아래의 코드 샘플 :

HTML :

<div id="retail-nav"> 
       <div id="navwrap"> 
        <ul> 
         <li id="retail-tab-1"><a class="active"><i class="icon-list-alt"></i> <?php the_field(tab_1);?></a></li> 
         <li id="retail-tab-2"><a><i class="icon-lock"></i> <?php the_field(tab_2);?></a></li> 
         <li id="retail-tab-3"><a><i class="icon-lightbulb"></i> <?php the_field(tab_3);?></a></li> 
        </ul> 
       </div> 
      </div> 
      <div id="retail-nav-float"> 
       <div id="navwrap-float"> 
        <ul> 
         <li id="retail-tab-1-float"><a class="active"><i class="icon-list-alt"></i> <?php the_field(tab_1);?></a></li> 
         <li id="retail-tab-2-float"><a><i class="icon-lock"></i> <?php the_field(tab_2);?></a></li> 
         <li id="retail-tab-3-float"><a><i class="icon-lightbulb"></i> <?php the_field(tab_3);?></a></li> 
        </ul> 
       </div> 
      </div> 

자바 스크립트

var navHeight = jQuery('#retail-nav').offset().top; 
       jQuery(window).scroll(function() { 
        if(jQuery(window).scrollTop() > navHeight) { 
         jQuery('#retail-nav-float').css('display', 'inline'); 
        }else{ 
         jQuery('#retail-nav-float').css('display', 'none'); 
        } 
       }); 

CSS : 전화 & 태블릿에 대한

#retail-nav{ 
    width: 100%; 
    height: 55px; 
    background-color: #494949; 
    overflow: hidden; 
    position: relative; 
} 
#retail-nav-float{ 
    width: 100%; 
    height: 55px; 
    background-color: #494949; 
    overflow: hidden; 
    position: fixed; 
    top:0; 
    display: none; 
} 
#navwrap, #navwrap-float{ 
    height: 100%; 
    width: 100%; 
    max-width: 1012px; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: -13px; 
    text-align:center; 
    line-height: 55px; 
} 

답변

1

, 당신은 touchmove 이벤트를 추가해야합니다.

element.addEventListener("touchmove", touchMove, false); 

이 페이지는 그것에 대해 깊이 간다 : 나는 희망 https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

이 당신을 도와줍니다!

+0

저는이 문제를 해결하기 위해 머리를 쓰려고했지만이 방법을 효과적으로 구현하여 데스크톱에서 스크롤 이벤트를 대체 할 수있는 방법을 찾지 못했습니다 ... – Watty