We Keep Coding

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

$(window).scroll being executed inside if-statement even when it doesn't meet the conditions

I'm using a debounce script as part of a conditional that will add some css to a side menu when a user scrolls a page beyond a certain amount of pixels and then hide the menu when they are a set amount of pixels from the bottom. The script works as intended for screen widths 992px and above (as per conditional if (debounce_bodyWidth >= 992)) but it is still executing for dimensions below this.
Is there something about $(window).scroll that means it is executed irrespective of conditionals?
(function ($) {
contactDebounce = function () {
var debounce_bodyWidth = $(window).width();
if (debounce_bodyWidth >= 992) {
$(window).scroll(function () {
var distanceFromBottom = $(document).height() - $(this).scrollTop();
if (distanceFromBottom <= 1200) {
$('.sticky-element').addClass('hide');
} else if ($(this).scrollTop() >= 150) {
$('.sticky-element').removeClass('hide');
$('.sticky-element').css({
'position': 'fixed',
'top': '15px'
});
} else if ($(this).scrollTop() < 150) {
$('.sticky-element').css({
'position': 'relative',
'top': '0'
});
}
});
}
}
contactDebounce();
$(window).on("debouncedresize", contactDebounce);
})(jQuery);

What you are doing is binding a function to $(window).scroll on page load if the bodyWidth >= 992, this condition is never run again as all that is run on scroll is inside the scroll function you have created.
EDIT: It has been pointed out in comments that this is run again, on debounced resize. The problem then is that the scroll function has already been set when the condition is true and is not unset when the condition becomes false. You can either unset the event and check again on resize or add the condition inside the event and stop running the check on resize.
Try this, adding the condition inside the event:
(function ($) {
contactDebounce = function () {
$(window).scroll(function () {
var debounce_bodyWidth = $(window).width();
if (debounce_bodyWidth >= 992) {
var distanceFromBottom = $(document).height() - $(this).scrollTop();
var stickyElement = $('.sticky-element');
if (distanceFromBottom <= 1200) {
stickyElement.addClass('hide');
} else if ($(this).scrollTop() >= 150) {
stickyElement.removeClass('hide');
stickyElement.css({
'position': 'fixed',
'top': '15px'
});
} else if ($(this).scrollTop() < 150) {
stickyElement.css({
'position': 'relative',
'top': '0'
});
}
}
});
}
contactDebounce();
})(jQuery);
Or this, unbind when smaller, rebind when bigger:
(function ($) {
contactDebounce = function () {
var debounce_bodyWidth = $(window).width();
if (debounce_bodyWidth >= 992) {
$(window).scroll(function () {
var distanceFromBottom = $(document).height() - $(this).scrollTop();
var stickyElement = $('.sticky-element');
if (distanceFromBottom <= 1200) {
stickyElement.addClass('hide');
} else if ($(this).scrollTop() >= 150) {
stickyElement.removeClass('hide');
stickyElement.css({
'position': 'fixed',
'top': '15px'
});
} else if ($(this).scrollTop() < 150) {
stickyElement.css({
'position': 'relative',
'top': '0'
});
}
});
}
else
{
$(window).unbind('scroll');
}
}
contactDebounce();
$(window).on("debouncedresize", contactDebounce);
})(jQuery);

Sticky sidebar doesn't stop scrolling

I have a sticky sidebar on my page using the following script:
$(function() {
var offset = $("#sidebar").offset();
var 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
});
};
});
});
The problem is that it should stop scrolling when it reaches the Middle Block Div. At the moment it doesn't stop scrolling and it pushes all the rest of the content down. Is there a way to fix this?
- DEMO -
Thank you.

You need to get the position of .middle-block and stop the sidebar from scrolling at that point (minus the height of the sidebar).
Change your jQuery function to:
$(function() {
var offset = $("#sidebar").offset();
var mbOffset = $(".middle-block").offset();
var mbPos = mbOffset.top - $("#sidebar").outerHeight() - 30; /*30px extra space*/
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top ) {
if( $(window).scrollTop() < mbPos ) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
}
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
Updated Pen

you have check if Sidebar has been moved to Middle Box, if so just stop the sidebar to animate.
like this :
$(function() {
var offset = $("#sidebar").offset();
var boxOffset = $(".middle-block").offset().top;
var sidebarHeight = parseInt($("#sidebar").outerHeight());
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
if(($(window).scrollTop()+sidebarHeight)<boxOffset){
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
}
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
check it live here: jsfiddle

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

Make sticky div function responsive

I am trying to figure out how to turn off the sticky ability for my div when my site begins to scale to a specific size (767px). I tried changing the the position from absolute to relative in a media query. But when I tried to scroll past the div the whole screen scrolls back up to the div instead of allowing me to scroll down.
How can I remove the sticky effect when I scale to 767px and enable it when I scale to 768 and above?
$(function() {
var $sidebar = $("#postRecipe"),
$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
});
}
});
});
The CSS
#postRecipe {
position:absolute;
float:left;
width:30%;
}
#content {
float:right;
width:50%;
}
http://jsfiddle.net/y8KGG/4/

I have messed with something in jfiddle. You have to clean it up but I am sure you can use this to reference what you are doing.
I ran the JavaScript only when the screen was at a certain resolution. In firefox which I am using it works but doesn't change by simply making your screen smaller you have to refresh the page.
http://jsfiddle.net/y8KGG/10/
The JavaScript
$(function () {
if ($(window).width() >= 500) {
var $sidebar = $("#postRecipe"),
$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
});
}
});
}
});
The CSS
#media (max-width: 500px) {
#postRecipe {
position: relative;
float:left;
width:30%;
}
}
#content {
float:right;
width:50%;
}
#postRecipe {
position: absolute;
float:left;
width:30%;
}
EDIT:
Fixed the problem by calling the function every time the window is re sized.
JSFiddle: http://jsfiddle.net/y8KGG/17/
New JS:
$( window ).resize(function() {
var $sidebar = $("#postRecipe"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 15;
if ($(window).width() >= 500) {
$window.scroll(function () {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
}
});

The following test is the one that activate the sticky effect:
if ($window.scrollTop() > offset.top) { }
You can add a condition to activate it on specific screen sizes.
For example, you can activite it only on screen that have a width of 767px minimum:
if ($window.scrollTop() > offset.top && $window.width() > 767) { }
Demo