स्क्रॉलिंग

Question

स्क्रॉलिंग के आधार पर किसी छवि का नया भाग दिखाएं पहली बार पोस्टर। मुझे यह कहकर शुरू करना चाहिए कि मैं एक ऐसी वेबसाइट तैयार करने की प्रक्रिया में एक ग्राफिक डिजाइनर हूं जिसे मुझे कोड करना होगा। मेरे पास न्यूनतम जावास्क्रिप्ट/jquery अनुभव है। मुझे वेब पेज पर स्थान के आधार पर छवि का एक नया हिस्सा कैसे पता चला है, यह जानने का प्रयास करने में परेशानी हो रही है।

मैं स्कूबा डाइविंग साइट डिज़ाइन कर रहा हूं और मैं बाईं ओर बाईं ओर दी गई वेबसाइट में उपयोग किए गए गहराई लोकेटर को दोहराने की कोशिश कर रहा हूं। केवल एक संख्या होने के बजाय मेरे पास प्रत्येक गहराई पर प्रमाणन स्तर से संबंधित जानकारी होगी। किसी भी पाठ या छवि के साथ ऐसा करने के बारे में कोई सुझाव जो वेब पेज पर स्थान के आधार पर बदल जाएगा।

http://lostworldsfairs.com/atlantis/

धन्यवाद!

Answer 1

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script> 
<script> 

    var depths = [1500,4000,7000]; 
    var words = ['shallow','medium','deep','darkness']; 

    $(document).ready(function() { 

     $(window).scroll(function() { 
     var depth = Math.floor($(window).scrollTop()); 

     for(i in depths){ 

      if(depth<depths[i]){ 
      $("#depth-o-meter").html(words[i]); 
      break; 
      } 

     } 


     }); 

    }); 

</script> 

<div style = 'position:fixed' ><span id = 'depth-o-meter' >aaa </span></div> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br> 

इस परीक्षण के लिए कुछ परीक्षण डेटा और एचटीएमएल के साथ स्क्रिप्ट है :) यह

Answer 2

आपको पृष्ठ पर कहां हैं यह निर्धारित करने के लिए आपको अलग-अलग स्क्रॉल स्थिति मानों का उपयोग करने की आवश्यकता होगी। जुड़ा हुआ प्रश्न jQuery में इन मूल्यों प्राप्त करने के लिए कुछ अच्छी सलाह है

How do I determine height and scrolling position of window in jQuery?

आप एक Onscroll हैंडलर शायद इस तरह से अपनी सामग्री में परिवर्तन को गति प्रदान करने के लिए सिर्फ होता हैं:

$('body').scroll(function() { 
    // determine current scroll position 
    var scrollPosition = 0; 
    // determine position as per linked question 

    // change scroll image based on scroll position, assume this image has id of scrollImage 
    var scrollImage = $("#scrollImage"); 
    if (scrollPosition < 100) { 
     scrollImage.attr("src", "http://domain.com/path/to/image"); 
    } else if (scrollPosition < 200) { 
     scrollImage.attr("src", "http://domain.com/path/to/another/image"); 
    } // etc. 
});