how to stop animation when mouseover - javascript

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

Related

Jquery toggle width on scroll position looping

I'm trying to toggle the width of my pagination on scroll but the toggle seams to be looping and it grows and shrinks over and over once the scroll trigger is hit.
I'm looking for the pagination menu to grow out like a shelf at my scroll point. and hide when you reach back to the top section of the site. – alcoven 16 secs ago edit
My JS
$(window).on('scroll', function() {
var y_scroll_pos = window.pageYOffset;
var element_in_view = y_scroll_pos > activation_point;
var has_reached_bottom_of_page = max_scroll_height <= y_scroll_pos && !element_in_view;
if(element_in_view || has_reached_bottom_of_page) {
$('ul.pagination').animate({
width: 'toggle'
}, 350);
}
else {
$('ul.pagination').animate({
width: 'toggle'
}, 350);
}
});
http://codepen.io/alcoven/pen/XjLjVz

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

JS Scroll window while mouseover

I would like to scroll up or down the window while the mouse is over a specific element.
What I have so far basically works but it's not "smooth". It starts and stops on and on, not looking nice. Do you have any idea how to make a more constant smooth scrolling?
This is my code:
doScroll = 0;
$(".helperDown").mouseenter(function() {
scrollHandler = setInterval( function() {
console.log('scrolling down...');
if(doScroll == 0) {
doScroll = 1;
$("html, body").animate({scrollTop: fromTop+50}, 200, 'linear', function() {
doScroll = 0;
});
}
}, 200);
});
$(".helperDown").mouseleave(function() {
clearInterval(scrollHandler);
});
.helperDown is the area where the mouse has to be in to start scrolling. fromTop is always recalculated after a scroll event.
You can not start a series of animation and expect a smooth scrolling. What you need is to start one animation only by pre-calculating the distance this animation will cover. Also, jQuery has a nice wrapper for mouseenter and mouseleave -combined. It's the hover() function with two functions as its parameter. The following code block will solve your issue.
Also, this plnkr has both the up and down scroll feature:
https://plnkr.co/edit/WoneJ8?p=preview
$(function () {
// change this value as per your need
var distancePerSec = 1000;
$(".helperDown").hover(function () {
var h = $("body").height();
var targetScrollTop = h - $(window).height();
var distanceToTravel = targetScrollTop - $(window).scrollTop();
var animationDuration = (distanceToTravel / distancePerSec) * 1000;
$("html, body").animate({
scrollTop: targetScrollTop
}, animationDuration, 'linear');
}, function () {
// stop the animation
$("html, body").stop();
});
})

how to set speed following sidebar

I am using a sidebar which automatically scrolls up and down when scrolling the site. I am using this script for it:
$(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
});
};
});
});
But the automatically scrolling is a little bit fast. How can I set the speed of the up an down scrolling of the sidebar?
Assuming you're using jQuery, you can set the speed of the animation using "duration". It's a bit tricky to know if it works without the full HTML, but try this:
$(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
},{
duration: 1000
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
},{
duration: 5000
});
};
});
});
Source: http://api.jquery.com/animate/

jQuery animate on window scroll

I want to slid a div on window scroll to bottom. When document reach 800 (bottom) Div should scroll right 0 and less then 800 it should slid and hide.
Problem is when scrolling to bottom div is sliding and showing but again when scrolling to top it doesn't slid and hide.
This is my code
$(document).scroll(function () { // remove "$"
var s = $("#slidebox");
var y = $(this).scrollTop();
if (y > 800) {
s.animate({"right":"-450px"}, "slow");
} else if (y < 800) {
s.animate({"right":"0px"}, "slow");
}
});
Basically i want is to hide and show (with a slid effect) div on document scroll to bottom.
Check scrolling below jsfiddle.
jsfiddle
On one hand, user390....'s response is correct in that the height is calculated incorrectly.
On the other hand, the way animations work is that they queue up one after another, so sometimes the div doesn't slide in/away until everything else before it is done. Using .stop() fixes the issue.
var s = $("#slidebox");
$(document).scroll(function () { // remove "$"
var y = $(this).scrollTop() + $(window).height();
console.log(y);
if (y > 800) {
s.stop().animate({"right":"-450px"}, "slow");
} else {
s.stop().animate({"right":"0px"}, "slow");
}
});
Your problem is that the value you are using for your "Did I reach the bottom" if statement is wrong.
Here is the calculated value you should be using:
$(document).scroll(function () { // remove "$"
var s = $("#slidebox");
var y = $(this).scrollTop();
var bottom = jQuery(document).height() - jQuery(window).height();
if (y >= bottom) {
s.animate({"right":"-450px"}, "slow");
} else {
s.animate({"right":"0px"}, "slow");
}
});
Plus, I'd also recommand you to use a .stop(true, true) on your animated element before triggering the "animate" function if you don't want people to mess around with it.

Categories