मेरी जरूरतों के लिए उपयोग कर रहा है, मैं यह आसान, एक निरपेक्ष तैनात शीर्ष लेख का उपयोग स्क्रॉल से पहले इसे छिपाने के लिए और यह दिखाने जब खत्म स्क्रॉल (मैं समर्थन करने के लिए एक ही कोड की जरूरत करने के लिए मिला आईओएस 4 और एंड्रॉइड)।
मेरी प्रयोजनों के लिए, मैं एक touchstart घटना पर हैडर छुपाने के लिए, और touchend या scroll घटना पर फिर से यह दिखाने के (प्लस कुछ टाइमर जवाबदेही में सुधार/अस्थिर कम करने के लिए)। यह चमकता है, लेकिन मुझे लगता है कि सबसे अच्छा समझौता है। एक touchmove घटना (jQuery करता है) का उपयोग कर स्क्रॉल के शुरू होने से पता लगा सकते हैं, लेकिन मैंने पाया क्योंकि touchmove मेरे लिए के रूप में अच्छी काम नहीं किया:
नियमित रूप से iPad स्क्रॉल से पहले एक रीपेंट करने के लिए विफल रहता है (यानी पूर्ण शीर्षलेख अटक गया है - भले ही top स्क्रॉलिंग शुरू होने से पहले बदला गया था)।
जब एक इनपुट तत्व ध्यान केंद्रित, आईपैड ऑटो केन्द्रों तत्व हो जाता है, लेकिन scrollstart गतिविधि सक्रिय नहीं प्राप्त करता है (क्योंकि कोई touchmove अगर सिर्फ click एक इनपुट ing)।
iOS5 पर एक निश्चित हैडर को लागू तय की और पूर्ण स्थिति के एक संकर दृष्टिकोण का उपयोग करके सुधार किया जा सकता:
iOS5 के लिए इस्तेमाल किया तय स्थिति जब तक एक इनपुट ध्यान केंद्रित हो जाता है।
जब इनपुट इनपुट (कीबोर्ड दिखा रहा है), आईओएस 4 पूर्ण स्थिति कोड में बदलें।
जब कीबोर्ड बंद हो जाता है, तो निश्चित स्थिति पर वापस बदलें। जब कुंजीपटल (जैसे कीबोर्ड छिपाने कुंजी का उपयोग) बंद कर दिया है पता लगाने के लिए
कोड document तत्व पर DOMFocusOut घटना रजिस्टर और निम्न कोड की तरह कुछ करने के लिए है। टाइमआउट की आवश्यकता है क्योंकि DOMFocusOut घटना तब होती है जब एक तत्व फोकस प्राप्त करता है और दूसरा इसे खो देता है।
function document_DOMFocusOut() {
clearTimeout(touchBlurTimer);
touchBlurTimer = setTimeout(function() {
if (document.activeElement == document.body) {
handleKeyboardHide();
}
}.bind(this), 400);
}
मेरे तय हैडर कोड है कुछ की तरह:
{
setup: function() {
observe(window, 'scroll', this, 'onWinScroll');
observe(document, 'touchstart', this, 'onTouchStart');
observe(document, 'touchend', this, 'onTouchEnd');
if (isMobile) {
observe(document, 'DOMFocusOut', this, 'docBlurTouch');
} else if (isIE) {
// see http://ajaxian.com/archives/fixing-loss-of-focus-on-ie for code to go into this.docBlurIe()
observe(document, 'focusout', this, 'docBlurIe');
} else {
observe(isFirefox ? document : window, 'blur', this, 'docBlur');
}
},
onWinScroll: function() {
clearTimeout(this.scrollTimer);
this.scrolling = false;
this.rehomeAll();
},
rehomeAll: function() {
if ((isIOS5 && this.scrolling) || isIOS4 || isAndroid) {
this.useAbsolutePositioning();
} else {
this.useFixedPositioning();
}
},
// Important side effect that this event registered on document on iOs. Without it event.touches.length is incorrect for any elements in the document using the touchstart event!!!
onTouchStart: function(event) {
clearTimeout(this.scrollTimer);
if (!this.scrolling && event.touches.length == 1) {
this.scrolling = true;
this.touchStartTime = inputOrOtherKeyboardShowingElement(event.target) ? 0 : (new Date).getTime();
// Needs to be in touchStart so happens before iPad automatic scrolling to input, also not reliable using touchMove (although jQuery touch uses touchMove to unreliably detect scrolling).
this.rehomeAll();
}
},
onTouchEnd: function(event) {
clearTimeout(this.scrollTimer);
if (this.scrolling && !event.touches.length) {
var touchedDuration = (new Date).getTime() - this.touchStartTime;
// Need delay so iPad can scroll to the input before we reshow the header.
var showQuick = this.touchStartTime && touchedDuration < 400;
this.scrollTimer = setTimeout(function() {
if (this.scrolling) {
this.scrolling = false;
this.rehomeAll();
}
}.bind(this), showQuick ? 0 : 400);
}
},
// ... more code
}
jQuery मोबाइल scrollstart और scrollstop घटनाओं का समर्थन करता है:
var supportTouch = $.support.touch,
scrollEvent = "touchmove scroll",
touchStartEvent = supportTouch ? "touchstart" : "mousedown",
touchStopEvent = supportTouch ? "touchend" : "mouseup",
touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
function triggerCustomEvent(obj, eventType, event) {
var originalType = event.type;
event.type = eventType;
$.event.handle.call(obj, event);
event.type = originalType;
}
// also handles scrollstop
$.event.special.scrollstart = {
enabled: true,
setup: function() {
var thisObject = this,
$this = $(thisObject),
scrolling,
timer;
function trigger(event, state) {
scrolling = state;
triggerCustomEvent(thisObject, scrolling ? "scrollstart" : "scrollstop", event);
}
// iPhone triggers scroll after a small delay; use touchmove instead
$this.bind(scrollEvent, function(event) {
if (!$.event.special.scrollstart.enabled) {
return;
}
if (!scrolling) {
trigger(event, true);
}
clearTimeout(timer);
timer = setTimeout(function() {
trigger(event, false);
}, 50);
});
}
};
यह पता चला है यह है एक iOS बग, मैं इस छोड़ना होगा अभी के लिए जारी करें, लेकिन आपके सुझाव मान्य हैं इसलिए मैं इस उत्तर को सही – jas
जेस चिह्नित करूंगा, क्या आईओएस बग समस्या यूआरएल के लिए लिंक देना संभव है? – robocat
मैंने देखा नहीं है कि आईओएस 6 में क्या तय किया गया है, लेकिन कम से कम एक अतिरिक्त बग जोड़ा गया है: http://igstudio.blogspot.com/2012/09/positionfixed-in-ios-6.html (मैं भी संदेह है कि निश्चित div को एक सीएसएस प्रॉपर्टी दे रही है जो इसे हार्डवेयर त्वरित कंपोजिट करने के लिए मजबूर कर सकती है)। – robocat