Develop Reference

When the window is loading the event stops. After scrolling down the event starts

(function () {
var previousScroll = 0;
$(window).scroll(function(){
var currentScroll = $(this).scrollTop();
if (currentScroll > previousScroll){
event.preventDefault();
}
previousScroll = currentScroll;
});
}());
$(window).on('load', function () {
$(".timer").timerstart({
event.stopPropagation()l
});
});
is it possible?
when the page is begin event is stopping and scroll down event start.

Detect scroll up when your top of page

Im using a script to detect scroll up to click a previous link. I want to detect scroll up even when your top of the page and do a scroll up. Now I have to scroll down a bit then up again. How can I do this?
Code:
var lastScrollTop = 0, delta = 5;
jQuery(window).scroll(function(){
var nowScrollTop = jQuery(this).scrollTop();
if(Math.abs(lastScrollTop - nowScrollTop) >= delta){
if (nowScrollTop > lastScrollTop){
// ACTION ON
// SCROLLING DOWN
} else {
jQuery( 'a.action.previous' ).click ();
}
lastScrollTop = nowScrollTop;
}
});

How to add Position Fixed on specific Div and then remove that class on scroll

Here is the Jsfiddle i am working on
https://jsfiddle.net/farooqshad/jbdczk10/10/
Basically i want to add a class on scroll to specific div and then remove that class .
Here is my javascript
var YourDiv = $(".mainwrapper");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
console.log(scroll);
if (scroll >= YourDiv.offset().top - 10) {
YourDiv.addClass('fixed');
console.log("fixed");
} else {
YourDiv.removeClass('fixed');
console.log("Not Fixed");
}
});

farooq try this solution
var YourDiv = $(".mainwrapper");
var foo=$(".footer1")
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= YourDiv.offset().top - 10 && scroll<=foo.offset().top - 10) {
YourDiv.addClass('fixed');
}
else
{
YourDiv.removeClass('fixed');
}
});
and let me know if don't works
this is fiddle

Turning jQuery event listener on after off

So I want to turn off a jQuery event under a certain condition (if the user scrolls down) but if they do the opposite (scroll up) then I want the event turned to on so that it will fire.
This is my code but as I am new to jQuery, I am pretty sure I'm missing something in the handler - I just don't know what it should be.
Here is the code:
function myFunction() {
var handler = function(e){
//code here
}
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > position) {
// scrolling downwards
$(window).off("scroll", handler);
}
if(scroll < position) {
//scrolling upwards
$(window).on("scroll", handler);
hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushTopToBottom, 1.1)
}
position = scroll;
});
}

try using an if-else statement instead of two ifs

$(function()
{
var handler = function(e){
// hypeDocument.showPreviousScene(hypeDocument.kSceneTransitionPushTopToBottom, 1.1)
console.log('handler');
}
var position = $(window).scrollTop();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > position) {
// scrolling downwards
// NOTHING
}
if(scroll < position) {
//scrolling upwards
handler();
}
position = scroll;
});
});
Open console and you'll see "handler" in output each time you scroll up.
You need to add scroll handler after document.ready event:
$(function() {
/* YOUR CODE HERE */
});
I think you doing wrong trying to subscribe and unsubscribe your handler.
You should just determine the direction of scroll as you do.
Then if it is right direction – call your handler:
if (scroll < position) {
//scrolling upwards
handler();
}

Update 3: in future you could do this instead.
var nT = $(window).scrollTop, pos = nT(), func = function(e){ /*code here*/ };
$(window).scroll(()=>(nT()<pos)&&(pos=nT(),func())); //make people hate you.
Update 2: and to make it even smaller..
var newTop = $(window).scrollTop, position = newTop(),
handler = function(e){ /*code here*/ };
$(window).scroll(function() {
(newTop()<position)&&(position=newTop(),handler());
});
Update: Or you could make it even better
var newTop = $(window).scrollTop, position = newTop();
var handler = function(e){
//code here
};
$(window).scroll(function() {
var scroll = newTop();
if(scroll < position) handler();
position = scroll;
});
Use Boolean variable instead of attaching/detaching event.
var disabled= false,
newTop = $(window).scrollTop,
position = newTop();
var handler = function(e){
if (disabled) return;
//code here
};
$(window).scroll(function() {
var scroll = newTop();
if(scroll > position) disabled=true;
else disabled=false;
position = scroll;
});

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"));