We Keep Coding

Execute code after scrolling a certain amount of pixels from a certain point (up or down)

I'm currently making an overlay that covers a sticky top bar when the user has scrolled beyond a certain point (down) and disappears when scrolling back up. However, I'd like to be able to scroll for at least 50px before the code is executed (something like a gap before the overlay is triggered).
$(function() {
var prevScroll = $(document).scrollTop(); //initial position
$(window).scroll(function() {
var newScroll = $(document).scrollTop(); //position from top after scrolling
if(newScroll > prevScroll) { // checks if the user has scrolled up or down
var fromNew = $(document).scrollTop(); // holds value to compare with the position + gap amount
if (fromNew > newScroll + 50) { //checks to see if scrolled for 50px
$("#stick-start").fadeIn("fast");
prevScroll = newScroll + 50; //initial position + scrolled amount
};
} else {
var fromNew = $(document).scrollTop();
if (fromNew > newScroll - 50) {
if ($("#stick-start").hasClass("is-stuck")) {
$("#stick-start").fadeOut("fast");
prevScroll = newScroll - 50;
};
};
};
});
});
The condition that checks whether you're scrolling up or down works. But as it is now, the overlay just keeps fading in and out repeatedly. How do I make it so that you have to scroll at least 50px before anything happens ?

I think this should get you where you're going.
var $document = $(document);
$(window).scroll(function() {
if ($document.scrollTop() >= 50) {
$("#stick-start").fadeIn("fast");
} else {
$("#stick-start").fadeOut("fast");
}
});
EDIT: had an error, should be good now.

$(window).scroll(function() {
if ($(this).scrollTop() >= 50) {
$("#stick-start").fadeIn();
} else {
$("#stick-start").fadeOut();
}
});

How to not let Sidebar scroll again when reach near footer?

I have found a jQuery code online and used it for my sidebar scrolling.
Right now, it works but I have a problem that whenever my sidebar reaches below the page, it continues to expand and allows me to continue scrolling down.
I want it to kinda stop scrolling down when it reaches the footer. Any ideas on how to do that?
Here is the current code below:
$(function() {
var $sidebar = $(".my-sidebar"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});

how to stop animation when mouseover

I am using this script for an automatic scrolling sidebar when scrolling on the page. This works fine, but I also want to achieve 2 things more:
when mouseover over the sidebar, the animation must stop (moving up or down). How can I make this possible?
the sidebar should start moving after 2 seconds when scrolling ( so a delay of 2 seconds before moving up or down)
$(function() {
var offset = $("aside.page-sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("aside.page-sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
},{
duration: 5000
});
} else {
$("aside.page-sidebar").stop().animate({
marginTop: 0
},{
duration: 5000
});
};
});
});

try:
$('#element').hover(function(e){
e.preventDefault();
$("aside.page-sidebar").stop(true,true);
});

Scroll div until top of footer

i've been looking for this for a couple of days but still no joy!
I would like to have a div scroll in a fixed position until it gets to the top of the footer.
Here is a fiddle of what i have so far: http://jsfiddle.net/danieljoseph/uk4mC/
I'm using this JQuery code but this uses pixels to determine when the div stops. I would like to use the top of the footer as the stop point:
$(document).scroll(function() {
var scrollVal = $(document).scrollTop();
$('#floating-container').css('top',scrollVal+'px');
if (scrollVal < 50) {
$('#floating-container').css('top','50px');
}
if (scrollVal > 2347) {
$('#floating-container').css('top','2347px');
}
});
The issue is that i am using a CMS and the client will be adding text to the page so the second value will change depending on what they add.
I hope i've been clear enough! please let me know if you require more details.
Thanks,

You have to check in the scroll event if the bottom edge of your div is lower than the footer. If it is, place the div at the position of the footer minus the height of the div.
$(function(){
var container = $('#floating-container');
var minTop = $('header').outerHeight();
var maxTop = $('footer').offset().top - container.outerHeight();
$(document).scroll(function() {
var scrollVal = $(document).scrollTop();
container.css('top', scrollVal);
if (scrollVal < minTop) {
container.css('top', minTop);
}
if (container.offset().top > maxTop ) {
container.css('top', maxTop );
}
});
});
Fiddle
And, a much shorter variant of the script above:
$(function(){
var container = $('#floating-container');
var minTop = $('header').outerHeight();
var maxTop = $('footer').offset().top - container.outerHeight();
$(document).scroll(function() {
container.css('top', Math.min( Math.max(minTop, $(document).scrollTop()), maxTop ));
});
});
Short version fiddle.

Just read the position of the footers top when you load the page:
http://jsfiddle.net/uk4mC/1/
var footerTop = $('#text-block').position().top;
and then use that as a trigger:
if (scrollVal < footerTop) { }

Get Scroll position after Div is hidden

I have a webpage that has a floating div in it which follows the user as the page scrolls.
the page is made up of other divs that can be expanded and hidden using jquery slideToggle functionality.
the problem is when i hide a div, the scroll bar moves down the page as the div is hidden instead of staying at the top of the page. any idea why this is happening?
Code for the Scroll:
var scrollPos;
$().ready(function () {
var $scrollingDiv = $("#FloatingClaimToolBar");
$(window).scroll(function () {
var top = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
// global var
scrollPos = top;
$scrollingDiv
.stop()
.animate({ "marginTop": (top - 15) + "px" }, 0);
});
});
After the div is hidden i call this method with the intention of positioning the floating div back to the top of the page but it doesn't work:
function AdjustToolBar(divID) {
var $scrollingDiv = $("#FloatingClaimToolBar");
$scrollingDiv
.stop()
.animate({ "marginTop": (window.scrollPos-15) + "px" }, 0);
}