मेरे पास एक एच 1 है जो एक पृष्ठ से काफी दूर है।
<h1 id="scroll-to">TRIGGER EVENT WHEN SCROLLED TO.</h1>
और जब उपयोगकर्ता h1 पर स्क्रॉल करता है, या यह ब्राउज़र के दृश्य में होता है, तो मैं एक अलर्ट ट्रिगर करना चाहता हूं।
$('#scroll-to').scroll(function() {
alert('you have scrolled to the h1!');
});
मैं यह कैसे करु?
जवाबों:
आप offsetतत्व की गणना कर सकते हैं और फिर उस scrollमूल्य के साथ तुलना कर सकते हैं जैसे:
$(window).scroll(function() {
var hT = $('#scroll-to').offset().top,
hH = $('#scroll-to').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
console.log('H1 on the view!');
}
});
इस डेमो फिडेल की जाँच करें
अद्यतित डेमो फ़ेल्ड कोई चेतावनी नहीं - बजाय FadeIn () तत्व
यह देखने के लिए कि कोड व्यूपोर्ट के अंदर है या नहीं, अपडेटेड कोड। इस प्रकार यह काम करता है कि क्या आप ऊपर या नीचे स्क्रॉल कर रहे हैं या यदि कुछ कथन को जोड़ रहे हैं:
if (wS > (hT+hH-wH) && (hT > wS) && (wS+wH > hT+hH)){
//Do something
}
.off()घटना jsfiddle.net/n4pdx/543
जब कोई उपयोगकर्ता पृष्ठ के एक निश्चित भाग को स्क्रॉल करता है, तो इस प्रश्न को jQuery ट्रिगर एक्शन से सबसे अच्छे उत्तर के साथ संयोजित करना
var element_position = $('#scroll-to').offset().top;
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var scroll_pos_test = element_position;
if(y_scroll_pos > scroll_pos_test) {
//do stuff
}
});
अपडेट करें
मैंने कोड में सुधार किया है ताकि यह तब ट्रिगर होगा जब तत्व स्क्रीन के आधे हिस्से के बजाय बहुत ऊपर है। यदि उपयोगकर्ता स्क्रीन के निचले भाग को हिट करता है और फ़ंक्शन को अभी तक नहीं हटाया गया है तो यह कोड को भी ट्रिगर करेगा।
var element_position = $('#scroll-to').offset().top;
var screen_height = $(window).height();
var activation_offset = 0.5;//determines how far up the the page the element needs to be before triggering the function
var activation_point = element_position - (screen_height * activation_offset);
var max_scroll_height = $('body').height() - screen_height - 5;//-5 for a little bit of buffer
//Does something when user scrolls to it OR
//Does it when user has reached the bottom of the page and hasn't triggered the function yet
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var element_in_view = y_scroll_pos > activation_point;
var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;
if(element_in_view || has_reached_bottom_of_page) {
//Do something
}
});
मुझे लगता है कि आपका सबसे अच्छा शर्त एक मौजूदा पुस्तकालय का लाभ उठाना होगा जो कि बहुत काम करता है:
http://imakewebthings.com/waypoints/
आप अपने तत्वों में श्रोताओं को जोड़ सकते हैं जो आपके तत्व को व्यूपोर्ट के शीर्ष पर हिट करने पर आग लगेंगे:
$('#scroll-to').waypoint(function() {
alert('you have scrolled to the h1!');
});
उपयोग में इसका एक अद्भुत डेमो के लिए:
http://tympanus.net/codrops/2013/07/16/on-scroll-header-effects/
Inview लाइब्रेरी ने घटना को ट्रिगर किया और jquery 1.8 और उच्चतर के साथ अच्छी तरह से काम करता है! https://github.com/protonet/jquery.inview
$('div').on('inview', function (event, visible) {
if (visible == true) {
// element is now visible in the viewport
} else {
// element has gone out of viewport
}
});
यह पढ़ें https://remysharp.com/2009/01/26/element-in-view-event-plugin
आप सभी उपकरणों के लिए इसका उपयोग कर सकते हैं,
$(document).on('scroll', function() {
if( $(this).scrollTop() >= $('#target_element').position().top ){
do_something();
}
});
सफल स्क्रॉल के बाद केवल एक बार फायर स्क्रॉल
स्वीकृत उत्तर ने मेरे लिए (90%) काम किया लेकिन मुझे इसे केवल एक बार आग लगाने के लिए थोड़ा मोड़ना पड़ा।
$(window).on('scroll',function() {
var hT = $('#comment-box-section').offset().top,
hH = $('#comment-box-section').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > ((hT+hH-wH)-500)){
console.log('comment box section arrived! eh');
// After Stuff
$(window).off('scroll');
doStuff();
}
});
नोट : सफल स्क्रॉल द्वारा मेरा मतलब है कि जब उपयोगकर्ता मेरे तत्व को स्क्रॉल किया है या दूसरे शब्दों में जब मेरा तत्व देखने में है।
आप इस तरह की घटना के साथ jQuery प्लगइन का उपयोग कर सकते हैं inview:
jQuery('.your-class-here').one('inview', function (event, visible) {
if (visible == true) {
//Enjoy !
}
});
लिंक: https://remysharp.com/2009/01/26/element-in-view-event-plugin
यह वही होना चाहिए जो आपको चाहिए।
जावास्क्रिप्ट:
$(window).scroll(function() {
var hT = $('#circle').offset().top,
hH = $('#circle').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
console.log((hT - wH), wS);
if (wS > (hT + hH - wH)) {
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 900,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
}); {
$('.count').removeClass('count').addClass('counted');
};
}
});
सीएसएस:
#circle
{
width: 100px;
height: 100px;
background: blue;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
float:left;
margin:5px;
}
.count, .counted
{
line-height: 100px;
color:white;
margin-left:30px;
font-size:25px;
}
#talkbubble {
width: 120px;
height: 80px;
background: green;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
float:left;
margin:20px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 15px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 20px solid green;
border-bottom: 13px solid transparent;
}
HTML:
<div id="talkbubble"><span class="count">145</span></div>
<div style="clear:both"></div>
<div id="talkbubble"><span class="count">145</span></div>
<div style="clear:both"></div>
<div id="circle"><span class="count">1234</span></div>
इस बूट की जाँच करें: http://www.bootply.com/atin_agarwal2/cJBywxX5Qp
इन्टर्सेशन ऑब्जर्वर IMO की सबसे अच्छी बात हो सकती है, बिना किसी बाहरी लाइब्रेरी के यह वास्तव में अच्छा काम करता है।
const options = {
root: null,
threshold: 0.25, // 0 - 1 this work as a trigger.
rootMargin: '150px'
};
const target = document.querySelector('h1#scroll-to');
const observer = new IntersectionObserver(
entries => { // each entry checks if the element is the view or not and if yes trigger the function accordingly
entries.forEach(() => {
alert('you have scrolled to the h1!')
});
}, options);
observer.observe(target);
यदि आप स्क्रॉल स्थिति के आधार पर बहुत अधिक कार्यक्षमता कर रहे हैं, तो स्क्रॉल जादू ( http://scrollmagic.io/ ) पूरी तरह से इस उद्देश्य के लिए बनाया गया है।
जब स्क्रॉल करने पर उपयोगकर्ता कुछ तत्वों तक पहुँचता है, तो उसके आधार पर JS को ट्रिगर करना आसान हो जाता है। यह GSAP एनीमेशन इंजन ( https://greensock.com/ ) के साथ भी एकीकृत होता है जो लंबन स्क्रॉलिंग वेबसाइटों के लिए बहुत अच्छा है
DaniP के उत्तर के लिए एक त्वरित संशोधन, तत्वों से निपटने वाले किसी के लिए जो कभी-कभी डिवाइस के व्यूपोर्ट की सीमा से आगे बढ़ सकता है।
बस थोड़ी सी सशर्त जोड़ी गई - तत्वों के मामले में, जो व्यूपोर्ट से बड़े हैं, तत्व का खुलासा तब होगा जब यह शीर्ष आधा हो जाएगा।
function elementInView(el) {
// The vertical distance between the top of the page and the top of the element.
var elementOffset = $(el).offset().top;
// The height of the element, including padding and borders.
var elementOuterHeight = $(el).outerHeight();
// Height of the window without margins, padding, borders.
var windowHeight = $(window).height();
// The vertical distance between the top of the page and the top of the viewport.
var scrollOffset = $(this).scrollTop();
if (elementOuterHeight < windowHeight) {
// Element is smaller than viewport.
if (scrollOffset > (elementOffset + elementOuterHeight - windowHeight)) {
// Element is completely inside viewport, reveal the element!
return true;
}
} else {
// Element is larger than the viewport, handle visibility differently.
// Consider it visible as soon as it's top half has filled the viewport.
if (scrollOffset > elementOffset) {
// The top of the viewport has touched the top of the element, reveal the element!
return true;
}
}
return false;
}
मैं एक ही कोड का उपयोग कर रहा हूं जो हर समय होता है, इसलिए एक साधारण jquery प्लगइन इसे कर रहा है। 480 बाइट्स लंबी, और तेज़। रनटाइम में केवल बाध्य तत्वों का विश्लेषण किया गया।
https://www.npmjs.com/package/jquery-on-scrolled-to
यह
$('#scroll-to').onScrolledTo(0, function() {
alert('you have scrolled to the h1!');
});
या 0 के बजाय 0.5 का उपयोग करें यदि एच 1 के आधे दिखाए जाने पर सतर्क करने की आवश्यकता है।