Develop Reference

How to detect correct div data attribute when each hitting the top of the page

I am working on the below code. Why am I not able to detect which div is reaching at the top of page in both down or up scroll?
$(window).scroll(function() {
$(".container").each(function() {
var $that = $(this);
var po = $(this).offset().top;
if (po >= 0 && po <= 300) {
console.log($that.data('map'));
}
});
});
.container {
height: 690px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" data-map="One">One</div>
<div class="container" data-map="Two">Tow</div>
<div class="container" data-map="Three">Three</div>
<div class="container" data-map="Four">Four</div>
<div class="container" data-map="Five">Five</div>

You'll need to use $(window).scrollTop(); as well as $that.outerHeight()
$(window).scroll(function() {
var windowScrollTop = $(this).scrollTop(); // window scroll top
$(".container").each(function() {
var $that = $(this);
var po = $that.offset().top;
var poHeight = $that.outerHeight(true); // the height of the element
var distanceTop = 100; // the distance from top to run the action .. it can be 0 if you want to run the action when the element hit the 0 top
if (windowScrollTop + distanceTop >= po && windowScrollTop + distanceTop <= po + poHeight) {
if(!$that.hasClass('red')){ // if element dosen't has class red
console.log($that.data('map'));
$(".container").not($that).removeClass('red'); // remove red class from all
$that.addClass('red'); // add red class to $that
}
}
});
}).scroll(); // run the scroll onload
.container {
height: 690px;
}
.container.red{
background : red;
color : #fff;
font-size: 30px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container" data-map="One">One</div>
<div class="container" data-map="Two">Two</div>
<div class="container" data-map="Three">Three</div>
<div class="container" data-map="Four">Four</div>
<div class="container" data-map="Five">Five</div>

Scroll on div without triggering full page scroll in angular

I have a website which have one page scroll feature using this - https://alvarotrigo.com/angular-fullpage/
Now in this website, In one page I want to create a division inside which the fullpage scroll feature is disabled and I can scroll that division as normal - like this https://stackblitz.com/edit/angular-kqvraz?file=src%2Fapp%2Fapp.component.html
What I have done till now -
app.component.html
<app-navbar></app-navbar>
<div fullpage id="fullpage2" [options]="config" (ref)="getRef($event)">
<div class="section" id="banner">
//first section
</div>
<div class="section" id="demos">
//second section
</div>
<div class="section" id="prod-solution">
// third section
</div>
<div class="section" id="scroll-solution">
<div style="height: 200px; border: 1px solid; overflow: auto;">
// div where I want to disable full page scroll and enable normal scroll
<div>
Please scroll
<div style="height: 1000px; width: 1000px;"></div>
</div>
</div>
</div>
</div>
app.component.ts
export class AppComponent {
config: any;
fullpage_api: any;
constructor() {
// for more details on config options please visit fullPage.js docs
this.config = {
// fullpage options
licenseKey: 'YOUR LICENSE KEY HERE',
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
menu: '#menu',
// fullpage callbacks
afterResize: () => {
console.log("After resize");
},
afterLoad: (origin, destination, direction) => {
console.log(origin.index);
}
};
}
getRef(fullPageRef) {
this.fullpage_api = fullPageRef;
}
}

You should catch the wheel event on the DIV that shouldn't trigger the fullpage scroll and only scroll this element.
Code
Modify the section of your code to match the following one:
<div style="height: 200px; border: 1px solid; overflow: auto;">
<!-- add a scroll event listener -->
<div (wheel)="blockScroll($event)">
Please scroll
<div style="height: 1000px; width: 1000px;"></div>
</div>
</div>
Add the event listener in your app.component.ts:
blockScroll(e) {
let delta = e.deltaY || -e.detail;
e.currentTarget.scrollTop += delta * 30;
e.stopPropagation();
e.preventDefault();
}
Demo
I added a scrolling container in "Section 2" that will only scroll its own content without triggering the fullpage scroll.
Demo on StackBlitz
If you want other scroll events like touch to be handled as well you need to add the relevant event to the <div> as well.

For scrolling on pages higher than 100vh, We want scrolling to be done normally and when we get to the bottom of the page, do a full scroll.
For this purpose, you can use the fullpage.js package, which requires a license. But by typescript, it can be easily implemented.
sample in stackblitz
in file.html use (mousewheel):
<div class="container" id="main-container"
(mousewheel)="changeMouseWheel($event)">
<div class="panel" id="el1"></div>
<div class="panel" id="el2"></div>
<div class="panel" id="el3"></div>
<div class="panel" id="el4"></div>
<div class="panel" id="el5"></div>
<div class="panel" id="el6">
<h1>whit long height</h1>
</div>
</div>
in fil.css:
.panel{
width: 100%;
height: 100vh;
}
#el1 {background-color: antiquewhite}
#el2 {background-color: aliceblue}
#el3 {background-color: beige}
#el4 {background-color: aqua}
#el5 {background-color: #00ffae
}
#el6 {height: 200vh; background-color: #6200ff
}
in file.ts:
changeMouseWheel(e) {
const sectionCount = document.querySelectorAll('.panel').length;
const windowHeight = window.innerHeight;
if (e.deltaY < 0 && this.sectionNumber > 1) {
if (this.hold === false) {
this.hold = true;
this.sectionNumber -= 1;
const element = document.getElementById(`el${this.sectionNumber}`);
this.scroll(element.offsetTop, 0);
setTimeout(() => {
this.hold = false;
}, 500);
e.preventDefault();
}
}
if (e.deltaY > 0 && this.sectionNumber < sectionCount) {
const currentElement = document.getElementById(`el${this.sectionNumber}`);
if (((currentElement.offsetTop + currentElement.offsetHeight) - windowHeight) <= document.documentElement.scrollTop) {
if (this.hold === false) {
this.hold = true;
this.sectionNumber += 1;
console.log(`#el${this.sectionNumber}`);
const nextElement = document.getElementById(`el${this.sectionNumber}`);
this.scroll(nextElement.offsetTop, 0);
setTimeout(() => {
this.hold = false;
}, 500);
e.preventDefault();
}
}
}
}
scroll(topData: number, leftData: number) {
window.scrollTo({
top: topData,
left: leftData,
behavior: 'smooth'
});
}

jquery scrolltop stay position after response

I wrote a code to view the chat history. Everything works fine, but I realized that. When you scroll up the div to view the history, old posts are displayed at a time. I've added this code $("#messages").scrollTop(200); to be able to continue scrolling, but this should not be. When you want to view old messages in apps like whatsapp or facebook, you can continue to scroll up for viewing old messages.
What am I supposed to do to stay position after response?
Here is DEMO page.
$(document).ready(function() {
var logDown = $(".chatContainer");
logDown.animate({ scrollTop: logDown.prop("scrollHeight") }, 0);
var messages = ''; // New Posts are in demo
var scrollLoading = true;
$("#messages").scrollTop($("#messages")[0].scrollHeight);
$("#messages").on("scroll", function() {
if (scrollLoading && $("#messages").scrollTop() == 0) {
$("#messages").prepend(messages);
$("#messages").scrollTop(200);
}
});
});

now I understood, i solved it by subtracting the old-height from the new height and set this "old-position" as scrolltop
var old_height,new_height;
$("#messages").on("scroll", function() {
if (scrollLoading && $("#messages").scrollTop() == 0) {
old_height = $("#messages")[0].scrollHeight;
$("#messages").prepend(messages);
new_height = $("#messages")[0].scrollHeight;
$("#messages").scrollTop(new_height - old_height);
}
});
works optimal for me

If I understood your problem you don't want to scroll to the top of the messages at every batch of prepends.
I managed to pull a version without jQuery and using window.requestAnimationFrame for good scroll performance.
Just my $0.02 on the problem.
var container = document.querySelector("#messages");
container.scrollTop = container.scrollHeight;
container.addEventListener("scroll", function(e) {
last_known_scroll_position = e.target.scrollTop;
var ticking;
if (!ticking) {
window.requestAnimationFrame(function() {
if (last_known_scroll_position == 0) {
var delta = e.target.scrollHeight;
for (var i = 1; i <= 5; i++) {
var message = document.createElement("DIV");
message.textContent = "Message Here";
message.classList.add("message", "red");
e.target.prepend(message);
}
delta = e.target.scrollHeight - delta;
e.target.scrollTop = delta;
ticking = false;
}
});
ticking = true;
}
});
DIV.chatContainer {
height: 200px;
overflow: auto;
}
.message {
margin-bottom:10px;
}
.red {
background-color:red;
}
<div class="container">
<div class="chatContainer" id="messages">
<div class="message">Message HERE</div>
<div class="message">Message HERE</div>
<div class="message">Message HERE</div>
<div class="message">Message HERE</div>
<div class="message">Message HERE</div>
<div class="message">Message HERE</div>
<div class="message">Message HERE</div>
<div class="message">Message HERE</div>
<div class="message">Message HERE</div>
<div class="message">Message HERE</div>
<div class="message">Message HERE</div>
<div class="message">Message HERE</div>
<div class="message">Message HERE</div>
<div class="message">Message HERE last</div>
</div>
</div>

Change active state on scroll to viewport

I'm trying to make a single static website, which when an div child of comes into viewport (precisely, when div element comes into the upper 50% of the viewport) changes the corresponding div's class in side-nav to "active". It should work scrolling down and up.
So far I've tried several solution from other threads on SO, none successful. I assume I've been approaching this wrong.
$(window).on('scroll', function() {
$("#vars-args").each(function() {
if (elementInViewport2($(this))) {
$(this).find("#div1a").addClass("active");
}
});
});
function elementInViewport2(el) {
var top = el.offsetTop;
var left = el.offsetLeft;
var width = el.offsetWidth;
var height = el.offsetHeight;
while (el.offsetParent) {
el = el.offsetParent;
top += el.offsetTop;
left += el.offsetLeft;
}
return (
top < (window.pageYOffset + window.innerHeight) &&
left < (window.pageXOffset + window.innerWidth) &&
(top + height) > window.pageYOffset &&
(left + width) > window.pageXOffset
);
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<div id="side-nav">
1
2
3
4
5
6
</div>
<div id="content">
<div id="div1">
<!--content-->
</div>
<div id="div2">
<!--content-->
</div>
<div id="div3">
<!--content-->
</div>
<div id="div4">
<!--content-->
</div>
<div id="div5">
<!--content-->
</div>
<div id="div6">
<!--content-->
</div>
</div>
Also note that content of each div inside can be larger than the size of viewport.
I have been having problems getting the javascript to work. Also please note that the current JS is copied from some other thread.

This can be achieved using the IntersectionObserver as told by #cloned in the comments: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
To achieve this, you need a callback function passed as a parameter which is executed once isIntersecting is true, an option object (below it sets the threshold at 50% of the element) and an IntersectionObserver.
The callback toggles the active class to the a element according to the entry's id.
At the end we loop through the divs and make our observer observe them.
const callback = (entries, observer) => {
entries.forEach(entry => {
const navItem = document.querySelector('#' + entry.target.id + 'a');
if (entry.isIntersecting) {
console.log(navItem.getAttribute('id'));
navItem.classList.add('active');
} else {
navItem.classList.remove('active');
}
});
};
const options = {
threshold: 0.5
};
const observer = new IntersectionObserver(callback, options);
const container = document.getElementById('content');
const targetElements = container.querySelectorAll('div');
targetElements.forEach(element => {
observer.observe(element);
});
Here is a JSBin to demonstrate it https://jsbin.com/riyuhediso/47/edit?html,js,console,output
Note that although it demonstrates its feasibility it's not been profiled for performance issues which can be significant so I don't vouch for it.
If you are using Bootstrap you can use the ScrollSpy lib https://getbootstrap.com/docs/4.1/components/scrollspy/ and there is also ScrollMagic which is great http://scrollmagic.io/

You need to filter out which element is inside the viewport with the help of .getBoundingClientRect()
Checkout this
and check if any content has it's top and bottom within the half of the viewport ( window.innerHeight )
I took help of filter function to find out the index of contents that is within the built in function and set the .active class of the corresponding anchor.
Have a look at the snippet:
var direction = 0; // a variable to keep track of scrolled position;
$(window).on('scroll', function() {
// check if window is scrolling up or down;
if ($(window).scrollTop() > direction) { // if true, window scrolling scrolling down;
$('#side-nav').find('a').removeClass('active'); // remove active class from all anchors
$('#side-nav').find('a').eq(
// .eq() selector helps to find elements with index number, and here we pass a filter to find the content that is within the viewport;
$('#content').find('div').filter(function(index) {
return this.getBoundingClientRect().y <= (window.innerHeight / 2) && this.getBoundingClientRect().y + this.getBoundingClientRect().height > window.innerHeight / 2;
}).index()
).addClass('active');
// update the current scroll position now;
direction = $(window).scrollTop();
} else { // if false, window scrolling scrolling up;
$('#side-nav').find('a').removeClass('active'); // remove active class from all anchors
$('#side-nav').find('a').eq(
$('#content').find('div').filter(function(index) {
return this.getBoundingClientRect().y < (window.innerHeight / 2) && this.getBoundingClientRect().y + this.getBoundingClientRect().height > window.innerHeight / 2;
}).index()
).addClass('active');
// update the current scroll position now;
direction = $(window).scrollTop();
}
});
* {
margin: 0;
padding: 0;
}
#side-nav {
/* feel free to remove or change, only for testing */
position: fixed;
width: 100%;
top: 0;
padding: 15px;
}
#side-nav a {
/* feel free to remove, only for testing */
text-decoration: none;
color: grey;
margin-right: 5px;
font-size: 24px;
font-weight: bold;
}
#side-nav a.active {
color: #000;
/* sets color for the default active class */
}
#content div {
min-height: 600px;
background-color: #cecece;
border-bottom: 1px solid #fff;
box-sizing: border-box;
padding: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="side-nav">
<a href="" id="div1a" class='active'>1</a>
<!-- set a default class assuming the first one will be in viewport while window loads -->
2
3
4
5
6
</div>
<div id="content">
<div id="div1">
<p>One</p>
</div>
<div id="div2">
<p>Two</p>
</div>
<div id="div3">
<p>Three</p>
</div>
<div id="div4">
<p>Four</p>
</div>
<div id="div5">
<p>Five</p>
</div>
<div id="div6">
<p>Six</p>
</div>
</div>

How to execute a function when the scroll reaches an element?

I want to hide all elements but the first one so I use $(".item:not(:eq(0))").fadeOut();
I have elements with the same class "item":
<div class="item">First Item</div>
<div class="item">Second Item</div>
<div class="item">Third Item</div>
<div class="item">Fourth Item</div>
Then when I scroll to the next element which could be "second , third,fourth item" , I want to show it
I tried using :
function isScrolledIntoView(elem)
{
var centerY = Math.max(0,((jQuery(window).height()-
jQuery(elem).outerHeight()) / 2)
+ jQuery(window).scrollTop());
var elementTop = jQuery(elem).offset().top;
var elementBottom = elementTop + jQuery(elem).height();
return elementTop <= centerY && elementBottom >= centerY;
}
jQuery(window).on("scroll resize", function() {
jQuery(".news:not(:eq(0))").each(function(index, element) {
if (isScrolledIntoView(element)) {
jQuery(element).fadeIn(10000);
}
});
});
But it doesn't work with my method because the height of the body changes on showing the next item "Second Item" , So All the items are shown when I scroll to the "Second Item" or any other item.
How to hide the items but the first one and then fadIn() each on scrolling to it ?

This is using offset() in jquery. This demo will trigger function if
your element is completely in your viewport.
Tip:You need to take care of inner as well as outer height of element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
body{
height:200vh;
}
#test {
top: 100vh;
padding: 10px;
width: 300px;
position: relative;
border: 1px solid black;
height:100;
}
</style>
</head>
<body>
<p>scroll to test</p>
<div id="test">
<p>Click the button to get offsetTop for the test div.</p>
</div>
<script>
$(document).ready(function(){
$(window).scroll(function(){
var x = $("#test").offset();
var height1 = $("#test").outerHeight();
var y = document.documentElement.scrollTop;
var z = (x.top + height1) - y;
if(z < $(window).height()){
alert("fumction");
}
});
});
</script>
</body>
</html>

It will be more easy to use the combination of waypoint.js and animate.css.
Add animated class to every element to be animated. You can use any of the animate.css effects.
Change the offset { offset: '80%' } to control when the animation can start.
<div class="animated waypoint-slideup">
</div>
$('.waypoint-slideup').waypoint(function () {
$(this).addClass('slideInUp');
}, { offset: '80%' });
Use this in the css file
.waypoint-slideup{
opacity:0;}
.waypoint-slideup.slideInUp{
opacity:1;}