Develop Reference

Scroll Event Catch with jquery or vanilla Javascript

How can i catch scroll event? For example 1024px scroll down to top notify appears.
I'm stuck at this code;
(function () {
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
notify appears
} else {
notify appears
}
previousScroll = currentScroll;
});
}());

try this
$(window).scroll(function() {
var scrollTop = $(window).scrollTop();
if ( scrollTop > 1024 ) {
//your code block
}
});
the scrollTop() method sets or returns the vertical scrollbar position for the selected elements.

JQuery fadeIn() when element comes into viewport

I would like to fadeIn() different elements as soon as they come into viewport view, when scrolling down a page.
My code however fades in all DIVs (that have the ".fadethis" class) at once, instead of only when that specific element comes into view:
$(window).scroll(function() {
$(".fadethis").each(function() {
var top_of_element = $(this).offset().top;
var bottom_of_element = $(this).offset().top + $(this).outerHeight();
var bottom_of_screen = $(window).scrollTop() + window.innerHeight;
var top_of_screen = $(window).scrollTop();
if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
$(this).fadeIn(10000);
}
});
});
CSS
.fadethis{
display:none;
}

Import jQuery, animate.less and waypoint
Javascript:
$(document).ready(function(){
$('.fromLeft').waypoint(function()
{
$(this.element).css('opacity',1);
$(this.element).addClass("bounceInLeft");
},
{offset:'100%'});
$('.fromRight').waypoint(function()
{
$(this.element).css('opacity',1);
$(this.element).addClass("bounceInRight");
},{offset:'100%'});
$('.appear').waypoint(function()
{
$(this.element).css('opacity',1);
$(this.element).addClass("fadeIn");
},{offset:'100%'});
});
And HTML
<div class="animated onView fromLeft">
appears from left
</div>
Here you can see an example I made

Change scrollTop offset when scrolling up, and different offset on scrollDown

I got an issue, where I have an dynamic header that gets bigger when scrolling up and smaller when scrolling down and therefore needs to change scrollTop offsets.
So i've been looking around and tried with my no existent java skills with no success.
This jquery code:
$(document).on('click', 'a[href^="#"]', function(e) {
var id = $(this).attr('href');
var $id = $(id);
if ($id.length === 0) {
return;
}
e.preventDefault();
// top position relative to the document
var pos = $(id).offset().top-500; // move this one
$('body, html').animate({scrollTop: pos});
});
var iScrollPos = 0;
$(window).scroll(function () {
var iCurScrollPos = $(this).scrollTop();
if (iCurScrollPos > iScrollPos) {
var pos = $(id).offset().top-500; //here when scrolling down
} else {
var pos = $(id).offset().top-100; // Here when scrolling up
}
iScrollPos = iCurScrollPos;
});
I made a JS fiddle to show what I'm trying to achieve: https://jsfiddle.net/zq9y7nge/1/
So, Is it possible to change offset depending on scrolling up and down?

Sticky Sidebar that only sticks when sidebar bottom is at window bottom

I have a 2 column layout. The left column is way longer than the sidebar. I want the sidebar only to stick when its bottom reaches the bottom of the browser window. So the user can continue to scroll down the left column content while the right sidebar sticks. I've seen a lot of sticky questions here, however this particular situation still stumps me. I also have a sticking headline bar on the left column that i've successfully gotten to stick.
Here's a demo of what I've done in jsfiddle!
and here's a quick look at the js I am trying out.
$(function(){
var headlineBarPos = $('.headlineBar').offset().top; // returns number
var sidebarHeight = $('.sticky-sidebar-wrap').height();
var sidebarTop = $('.sticky-sidebar-wrap').offset().top;
var windowHeight = $(window).height();
var totalHeight = sidebarHeight + sidebarTop;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
// fixing the headline bar
if (headlineBarPos < windowTop) {
$('.headlineBar').addClass('sticky').css('top', '0');
}
else {
$('.headlineBar').removeClass('sticky').removeAttr('style');
}
if(sidebarHeight < windowTop) {
$('.sticky-sidebar-wrap').addClass('sticky').css('top', '0');
} else {
$('.sticky-sidebar-wrap').removeClass('sticky').removeAttr('style');
}
console.log(windowTop);
});
console.log(headlineBarPos);
console.log(sidebarHeight);
console.log(sidebarTop);
});

I hope I got it right, when the bottom of the sidebar comes into the view, then stick?
I created another div at the bottom of the sidebar (inside the sidebar).
When that comes into view, it sticks.
http://jsfiddle.net/Z9RJW/10/
<div class="moduleController"></div> //inside the sidebar
and in js
$(function () {
var headlineBarPos = $('.headlineBar').offset().top; // returns number
var moduleControllerPos = $('.moduleController').offset().top; // returns number
var sidebarHeight = $('.sticky-sidebar-wrap').height();
var sidebarTop = $('.sticky-sidebar-wrap').offset().top;
var windowHeight = $(window).height();
var totalHeight = sidebarHeight + sidebarTop;
$(window).scroll(function () { // scroll event
var windowTop = $(window).scrollTop(); // returns number
// fixing the headline bar
if (headlineBarPos < windowTop) {
$('.headlineBar').addClass('sticky').css('top', '0');
} else {
$('.headlineBar').removeClass('sticky').removeAttr('style');
}
if (moduleControllerPos < windowTop + windowHeight) {
$('.sticky-sidebar-wrap').addClass('sticky').css('top', '0');
} else {
$('.sticky-sidebar-wrap').removeClass('sticky').removeAttr('style'); }
console.log(windowTop);
});
console.log(headlineBarPos);
console.log(sidebarHeight);
console.log(sidebarTop);
});
I hope it helps.

Something like:
if (sidebar.top + sidebar.height < window.scrolltop + window.height) {
// set sticky
}
and set sticky needs to take into account that the sidebar may be higher than the viewport, so:
sidebar.top = sidebar.height - window.height // this will be a negative number

Check if div is viewable in window?

I have a one page site with fixed navigation and using a scroll script, very similar to this: http://www.ivanjevremovic.in.rs/live/temptation/single/orange/index-cycle-slider.html
What I'm looking for is a way to check what section is viewable in the window to set the active state on the nav when using the browsers scroll bar, any ideas?

Here are all the variables you'll need...
var $myElt = $('.myElement'); // whatever element you want to check
var $window = $(window); // the window jQuery element
var myTop = $myElt.offset().top; // the top (y) location of your element
var windowTop = $window.scrollTop(); // the top of the window
var windowBottom = windowTop + $window.height(); // the bottom of the window
Then to make sure your element is within the window's range...
if (myTop > windowTop && myTop < windowBottom) {
// element is in the window
} else {
// element is NOT in the window
// maybe use this to scroll...
// $('html, body').animate({scrollTop: myTop}, 300);
}
jQuery reference:
http://api.jquery.com/offset/
http://api.jquery.com/height/
http://api.jquery.com/scrollTop/

Use $('#element').offset().top; to detect element top side.
$(window).scrollTop(); to detect current scroll position.
And $(window).height(); to detect current window height.
And after that steps you actually need only something easy math calculations.

function isScrolledIntoView(elem)
{
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
}
source: Check if element is visible after scrolling

see the following lazyload plugin:
http://plugins.jquery.com/files/jquery.lazyload.js__6.txt
the section which starts with the comment "return the status of the item relative to the current view" checks to see if an element is visible in the viewport.

If you are using jQuery just try to check the document position
$('html').position().top;
for example:
$(document).bind("scroll", checkLink);
function checkLink(){
/* Position will checked out after 1 sec when user finish scrolling */
var s = setTimeout(function(){
var docHeight = $('html').position().top;
var allLinks = $('.navigation a');
if ( docHeight < 0 && docHeight <= -1000 ) {
allLinks.removeClass('active');
$('a.firstlink').addClass('active');
} else
if ( docHeight < -1000 && docHeight <= -2000 ) {
allLinks.removeClass('active');
$('a.secondlink').addClass('active');
} else { /* .... */ }
$(document).bind("scroll", checkLink);
}, 1000);
$(document).unbind('scroll');
}
but guys in your example haven't held on this for a long time :) they just toggle classes on click
$('#navigation').localScroll();
$('#navigation li a').click( function () {
$('#navigation li a').removeClass("active");
$(this).addClass("active");
});

2022 answer - you don't have to use jQuery anymore for this
Now it is possible to use plain javascript with IntersectionObserver.
The problem with the other answers are that they fire off too many times.
For example you could to this:
var observer = new IntersectionObserver(function(entries) {
if(entries[0].isIntersecting === true) {
console.log('Element is in the window');
} else {
console.log("Element is not in the window");
}
});
observer.observe(document.querySelector(".myObject"));