Develop Reference

Stop scrolling down after scrolling to top

My problem is, that after fast scrolling down with the touchpad, the window is correctly jumping to the top after 300px, but after that, the browser is stil scrolling down.
Here is a example of my problem
https://codepen.io/anon/pen/XoMExW
I´ve tried this, but it didn´t work
How to disable scrolling temporarily?
$(window).scroll(function(){
if( $(window).scrollTop() >= 300 ){
$(window).scrollTop(0);
}
});

What you could do is after each scroll event, add a setTimeout. For every scroll event, you will first clear the one you created in the previous event and recreate a new one right after. This will keep running until you reach the last scroll event, then during this last scroll event, the callback of the setTimeout will be triggered and it will run your code:
var isScrolling;
$(window).scroll(function() {
window.clearTimeout(isScrolling);
isScrolling = setTimeout(function() {
if ($(window).scrollTop() >= 300) {
$(window).scrollTop(0);
}
}, 100);
});

Animate in div with image when scroll down to the bottom of where the image using jQuery

I have static images that I want to animate in when the user scrolls to the bottom of where they would be (the bottom of their rectangle). I've tried using the code:
$(window).on("scroll", function(){
if($("body").scrollTop() === 500){
$(window).off("scroll");
//Do stuff here
$('.context_right').fadein(4000);
}
});
With .context_right being the that contains the image I want to slide in from off the right side of the screen. I have tested this in Chrome debugger but there is not animation at all and I can't see why it's not being fired when scrolling down.

You're checking if the scroll position of the window is exactly equal to 500px. This is likely incorrect. You probably only want to check and see if the user has scrolled past 500px.
Consider changing:
if($("body").scrollTop() === 500)
to:
if($("body").scrollTop() >= 500)
Also, be careful with this:
$(window).off("scroll");
If you use any libraries that rely on the scroll event on the window, you would be unbinding all of those events in addition to your own.
Consider refactoring to something like the following:
var scrollAnimateIn = function(){
if($("body").scrollTop() >= 500){
$(window).off("scroll", scrollAnimateIn);
//Do stuff here
$('.context_right').fadein(4000);
}
};
$(window).on("scroll", scrollAnimateIn);

If div scrolled greater than - JS event

I am working on a website which has full body slides, the body's overflow is hidden. If the slide's content is greater than the height of the user's screen the user is required to scroll using the scrollbar or by swiping downwards on mobile.
I need it so that if the user scrolls greater than (for example) 50px a JS event triggers and if the user scrolls back up another JS event triggers. This will allow me to hide an element if the user scrolls and the element reapper if they go back towards the top.
I have used the following which works for when the user scrolls but I need to be able to define the value for it to be greater than and then have the other event when it's less than the value.
$(".section").scroll(function() {
$("#header").css( "display", "none" ).fadeOut( "slow" );
});
Any ideas would be massively appreciated guys!
Cheers
Liam

try using $(this).scrollTop():
$(".section").scroll(function() {
if ($(this).scrollTop() > 50) {
// do something
} else {
// do something else
}
});

jQuery .stop() on scroll is blocking animation

this is my simple scroll function.
When user scrolls a certain distance from the bottom of the page, a registration box appears via animation:
$(window).scroll(function(){
if($docHeight - $top < 500 && document.cookie.indexOf("flag") < 0) {
$('.register').stop().animate({
'bottom': -1,
});
return false;
}
});
My problem is that the .stop() function before .animate() triggers every time the user scrolls; and so during animation it is constantly stopping as the user scrolls causing a 'juddering' effect (of course, no juddering if the user doesn't scroll).
I have thought about setting flags during animation and not running the animation to avoid this, but I can't figure it out.
I believe the function .once() could be used well here?
Thanks

While Scrolling: if scrollTop() equals to or reaches a value execute event

I'm trying to fire an event when scrolling down to a certain point/value and execute again when scroll back up and down again.
I tried:
$(window).scroll(function(){
var sTop = $(this).scrollTop();
if(sTop == 300){
//execute event - failed
}
});
The above does not fire anything with the both mousewheel and dragging the scrollbar. but when I changed the condition to greater than or equal to, the event is being executed but multiple times when scrolling further down.
if(sTop >= 300){
//execute event - success
}
I also tried changing the condition value and some times the event is being fired.
if(sTop == 333 /* or 431, 658, etc. */){
//execute event - sometimes success
}
Here is my test fiddle.
Could it be that scroll() function sometimes skips a value if you scroll fast?
Can someone explain the issue and help me with a workaround on how to trigger an event when the $(window).scrollTop() == 'value'. Thanks

You're facing this issue because there are no guarantees that scrolling will be done in increments of 1. For example, some scroll wheels increment in values of 30. This means that you'd get a scroll event on 30, 60, 90, etc.
The best way to test if scrolling has reached your limit is to see if it has gone past the point you're wanting, then resetting the scroll to the precise point you're wanting. So you'd do:
if(sTop >= 300){
$(window).scrollTop(300);
}
Here's an updated link to your JSFiddle with a working example: http://jsfiddle.net/bC3Cu/4/
If you take a look at unit of increment in scrollable areas / divs in javascript? it describes how to set it to where you can override the scroll increment. Using that method, you should be able to predict how many units the user has scrolled without preventing them from scrolling further down the page.