फिक्स्ड हैडर jQuery मोबाइल

यह एक पंक्ति नीचे दिए गए लिंक में के रूप में शीर्ष में सेट हो रही के साथ, तय हेडर jQuery मोबाइल पाने के लिए संभव है?फिक्स्ड हैडर jQuery मोबाइल

http://www.expedia.com.au/p/promos/Beach-Breaks.htm

आप देख शीर्षक छवि ऊपर के लिंक ऊपर जाता है और शीर्ष लेख आता है और शीर्ष पर तय हो रही हैं।

enter image description here

ऊपर स्क्रॉल enter image description here

मुझे लगता है कि मैं ऊपर के लिंक में के रूप में तय हैडर प्राप्त कर सकते हैं लेकिन नहीं प्रभाव का उपयोग iScroll की कोशिश की है ऊपर स्क्रॉल करने के बाद से पहले। क्या इस मामले पर कोई लिंक या ट्यूटोरियल है? आपके समय के लिए बहुत बहुत धन्यवाद और अग्रिम में मदद करें।

स्रोत

2012-08-14 Jay Mayu

यह आप एक अच्छी शुरुआत दे देंगे [कैसे jQuery मोबाइल शीर्ष लेख और पाद तय रखने के लिए] [1] [1]: http://stackoverflow.com/questions/4724068/ कैसे करने के लिए रखने के-jQuery-मोबाइल-हैडर और पाद लेख निर्धारित – rahul

@rahul: नहीं, यह अलग है। – nhahtdh

दुर्भाग्यवश, jQuery मोबाइल में कुछ भी नहीं है जो आपको बॉक्स के ऊपर की कार्यक्षमता प्राप्त करने की अनुमति देगा। आपके पास एक [निश्चित शीर्षलेख] (http://jsbin.com/iyowog/1/) हो सकता है (*** पेज स्क्रॉल बनाने के लिए विंडो का आकार बदलें ***), लेकिन वह नहीं जो पृष्ठ के आधे रास्ते से शुरू होता है और फिर तय हो जाता है । – Jeemusu

ठीक है, तो तुम मुझे मैं कैसे jQuery मोबाइल में यह लागू हो सकता है के रूप में यह एक परियोजना मैं पर काम कर रहा हूँ में काम में आ सकता है के बारे में सोच कर ली।

JQuery Waypoints का उपयोग करके, यह जांचना संभव है कि कुछ तत्व पृष्ठ के शीर्ष पर कब आते हैं, और उस समय पृष्ठ किस दिशा में स्क्रॉल कर रहा था। मैं तुम्हें एक संभव समाधान को दिखाने के लिए निम्नलिखित jsbin की स्थापना की है:

http://jsbin.com/iyowog/3/edit

वेपोइंट कोड बहुत ही सरल है, बस अपनी साइट के तल में स्क्रिप्ट शामिल है इससे पहले कि आप बॉडी टैग बंद कर दें। फिर आप .waypoint() के साथ प्लगइन प्रारंभ कर सकते हैं। मैंने अपने उदाहरण में निम्न कोड का उपयोग किया है, जो आपके स्क्रॉलिंग के दौरान शीर्षलेख को ठीक करता है, और जब आप अपने मूल बिंदु से पहले बैक अप करते हैं तो उसे अनफ़िक्स करता है।

$('#header').waypoint(function(event, direction) { 

    if (direction === 'down') { 
     $('#header').attr('data-position', 'fixed'); 
     $('#header').addClass('ui-header-fixed'); 

    } else { 
     $('#header').attr('data-position', ''); 
     $('#header').removeClass('ui-header-fixed'); 
    } 
});

बेस्ट बात यह है कि यह गतिशील है, कोई फर्क नहीं पड़ता, जहां हैडर पेज के भीतर है यह जब यह पेज के शीर्ष समाप्त हो रहा है बताने के लिए सक्षम हो जाएगा।

स्रोत

2012-08-14 06:07:20 Jeemusu

आप browser.Let इस code.This ध्यान दें कि मैं इसे एक मोबाइल फोन में बाहर का परीक्षण नहीं किया work.Please चाहिए कोशिश कर सकते हैं मुझे पता है कि अगर मदद करता है।

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script> 
     $(document).on("pageshow","#page",function(){ 
      $(this).css("top","100px"); 
      $(".ui-header-fixed").css("position","absolute"); 
     }) 

     $(window).scroll(function(event){ 
      if($(window).scrollTop() >= 100){ 
       $(".ui-header-fixed").css("position","fixed"); 
      } 
      else{ 
       $(".ui-header-fixed").css("position","absolute"); 
      } 
     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
</head> 
<body> 
<div style="height:100px;background-color:#ccc"></div> 
<div data-role="page" id="page"> 

    <div data-role="header" data-position="fixed"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <div data-role="content" style="height:1500px;">  
     <p>Lorem ipsum dolor</p>   
    </div><!-- /content --> 

</div><!-- /page --> 

</body> 
</html>

एक यहाँ डेमो - http://jsfiddle.net/Xg86Z/

स्रोत

2012-08-14 06:05:32 user700284

फिक्स्ड हैडर jQuery मोबाइल

उत्तर

संबंधित मुद्दे