पुस्तक पेज तो certian स्थिति स्क्रॉल तत्व

Question

पर मैं ऐसा करने के तरीके कैसे के लिए एक नुकसान का एक सा पर कर रहा हूँ।

मैं एक वेब पेज है। मैं चाहता हूं कि उपयोगकर्ता नीचे स्क्रॉल करें, फिर शीर्ष से एक विशिष्ट दूरी पर मैं माउस स्क्रॉल को तत्वों की स्थिति को प्रभावित करने के लिए चाहता हूं (ऐसा लगता है कि तत्व स्क्रॉल कर रहा है)। तब जब वह तत्व किसी स्थिति को हिट करता है (यानी शीर्ष: -500) मैं स्क्रॉल को मुख्य वेबपृष्ठ पर फिर से लागू करना चाहता हूं। इस पर कोई विचार है कि मैं यह कैसे कर सकता हूं?

इम एक बेला पर काम कर, लेकिन किसी भी भाग्य नहीं होने, मैं जब मैं दिखाने के लिए

संपादित कुछ है पोस्ट करेंगे: एक समाधान/sudo कोड https://jsfiddle.net/vk0jk37v/23/

संलग्न की शुरुआत एक की एक छवि है वह क्षेत्र जिसमें मैं इसे लागू कर रहा हूं।

//pageFeature.style.backgroundPosition = "0px " + parseInt(-y/6) + 'px'); 

var element = document.getElementById('container').getBoundingClientRect(); 
var elementTop = element.top //distance from top 720; 

// variable to stop function from being replayed on scroll when scrolling image 
var isScrollingImage = false; 

// disables scroll on body 
var disableScroll = function() { 
    document.body.style.overflow='hidden'; 
} 
// enables scroll on body 
var enableScroll = function() { 
    document.body.style.overflow='auto'; 
} 
//change position of background along y axis with scroll 
var scrollImage = function() { 
    console.log("called"); 
    isScrollingImage = true; 
    var pageFeature = document.getElementById("inner"); 
    var pageFeaturePosition; 
    pageFeature.style.backgroundPositionY=parseInt(-scrollY/10) + "px"; 
    //if (background is scrolled to bottom) { 
    // enableScroll(); 
    // } 
} 

//when element gets to center of viewport and animation is scroll is not on element 
//call scrollImage() 
function checkPosition() { 
    if (scrollY > 720 && !isScrollingImage) { 
     disableScroll(); 
     scrollImage(); 
    } 
    //isScrollingImage = false; 
} 

//once out of view port will have to bring the image back down, 
//scroll image will only happen on the way down 

document.addEventListener('scroll', checkPosition); 

Answer 1

var thresholdY = 150; 
    var thresholdCounter = 0; 
    var speed = 4; 
    var element = document.getElementById('yourElement'); 

    window.onscroll = function(event) { 
     if(scrollY > thresholdY) { 
     window.scrollTo(0, thresholdY); 
     element.setAttribute('style', 'transform:translate3d(0,' + (--thresholdCounter * speed) + 'px,0);'); 
     return false; 
     } 
     return null; 
    }; 

यहाँ एक डेमो है: https://jsfiddle.net/pkt6xnb5/

विचार यहाँ है कि तुम जगह में खिड़की रखने के जब उपयोगकर्ता एक निश्चित सीमा से Y स्थिति तक पहुँचता है। इसके अलावा उस समय हम इसके वाई अक्ष के साथ तत्व को विपरीत दिशा में बदलते हैं, जहां उपयोगकर्ता इसे आगे बढ़ने के लिए आगे बढ़ने के लिए स्क्रॉल कर रहा है। क्या आप यही खोज रहे हैं?