Develop Reference

jQuery detect when scroll is within and not past a certain div

I have the following divs
<div id="item-1" >item 1 content get here </div>
<div id="item-2" >item 2 content get here </div>
I would like to execute a function when the scroll is between the div content and when the scroll goes beyond the div then execute a different function.
In my jQuery I have
$(window).on('scroll', function() {
var divs = ["item-1","item-2"]; //the above two divs
divs.forEach(function(item){
var current_div = $('#'+item).offset().top
if(current_div < window.pageYOffset) {
console.log("I have reached the div", item);
}
});
});
The above works when scrolling to the bottom, but doesn't work when scrolling to top. It also doesn't detect when I scroll beyond a certain div.
How can I detect when scroll is only with a certain div? The divs are dynamic, hence the need to use the array.

Your solution should work with the code below.
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256 QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
$(window).on('scroll', function() {
var divs = ["item-1","item-2"]; //the above two divs
divs.forEach(function(item){
var current_div = $('#'+item).offset().top
if(current_div < window.pageYOffset) {
console.log("I have reached the div", item);
}
});
});
And then your HTML
<div id="item-1" >item 1 content get here </div>
<div id="item-2" >item 2 content get here </div>
Note: The only change made is the JQuery inclusion.
Enjoy!

makes sticker div stop just above the footer on scroll - document.outerHeight give wrong results

css
.stick{position: fixed !important;}
sticker div with id="summary-div"
<div class="col-sm-8"><!-- this Div has 4 accordions div--></div>
<div class="col-sm-4">
<div>
<div>
<div>
<div id="order_summary">
<div id="summary-div"></div>
</div>
</div>
</div>
</div>
</div>
footer
<div class="container-fluid" id="stickEndPlace"></div>
The below jquery code is making it stick and unstick but the stickermax which is calculated dynamically to determine the css property top to stick it or unstick right above footer. BUT, the problem is; I have to give some static values for some of the scenarios for the "stickermax" variable to be pretty fit above footer otherwise, it is coming sometimes little below or little above the footer having id of "stickEndPlace". Please, help. Thanks
var s = $("#summary-div");
var pos = s.position();
var stickermax = $(window).outerHeight() - $("#stickEndPlace").outerHeight() - s.outerHeight();
$(window).scroll(function() {
var windowpos = $(window).scrollTop();
if (windowpos >= pos.top && windowpos < stickermax) {
$("#summary-div").addClass("stick"); //stick it
$("#summary-div").css("top",""); //kill top css property which sets while unsticking
} else if (windowpos >= stickermax) {
$("#summary-div").removeClass("stick"); //un-stick
$("#summary-div").css({top: stickermax + "px"}); //set sticker right above the footer
} else {
$("#summary-div").removeClass("stick"); //top of page
}
});
problem
The actual problem coming is from this line of code.
var stickermax = $(window).outerHeight() - $("#stickEndPlace").outerHeight() - s.outerHeight();
This "stickermax" value is not coming correctly so the Scroll Div sometimes go below inside footer and sometimes stops above footer.
How to fix that "stickermax" because it is the dynamic "top" css property which is making the sticker DIV positioning.

Add class to a child element on scroll (JQuery)

I'm having trouble with jQuery and JS in general. How do I add a class to a child element on vertical scroll in order to animate it?
Ex:
<div class="wrapper">
<p> Lorem ipsum </p>
</div>
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if(scroll <= 770) {
$('.wrapper p').addClass('animate fadeInDownBig');
}
});
I just wanna addClass to the paragraph. Not the wrapper.

As per your recent edit:
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if(scroll <= 770) {
$('.wrapper').find("p").addClass('animate fadeInDownBig');
}
});
DEMO

jquery detect when user scrolled to the top of list

I have dynamical list
<div id="content" class="content" data-role="content" data-scroll="y">
<div id="myDiv">
<form>
<ul id="myList" data-role="listview">
</ul>
</form>
</div>
</div>
And I want to append another list to myList, when you scrolled it to the top;
How can I detect when user scrolled it to the top?
I tried some variants of scrollTop function, like:
$(window).bind('scrollstop', function(){
alert("1 "+$(window).scrollTop());
alert("2 "+$('#content').scrollTop());
alert("3 "+$('#myDiv').scrollTop());
alert("4 "+$('#myList').scrollTop());
alert("5 "+$('#myList li').scrollTop());
});
but all of them returned 0 :(

You need to attach the scroll event to the element being scrolled. Assuming you are scrolling the #content element this will work:
$('#content').on('scroll', function(){
if ($(this).scrollTop() == 0) {
alert('at the top');
}
});
Example fiddle

Cycle through divs?

I have this HTML:
<div id="container">
<div class="boxes">first box</div>
<div class="boxes">second box</div>
<div class="boxes">third box</div>
</div>
Show me next box
Consider that initially only the first box is visible. When I click 'Show me next box' I want the current visible box to be hidden, and the next .boxes on the list to appear.
The only thing that I think it gets close is the .each function, but I shouldn't cycle through all divs just to show one, I think.

$('a').click(function() {
var visibleBox = $('#container .boxes:visible');
visibleBox.hide();
var nextToShow = $(visibleBox).next('.boxes:hidden');
if (nextToShow.length > 0) {
nextToShow.show();
} else {
$('#container .boxes:hidden:first').show();
}
return false;
});
Live demo.

$('a').click(function(){
$('.boxes').filter(':visible').hide().next().add('.boxes:first').last().show();
});