Develop Reference

How to stop an .each .animate loop function in jQuery

I try to move a set of different div, to do that I did a function to make an infinite movement in the space. Now I want to put the different div in a sort of grid to class them. It runs sometimes but It don't stop the function and when every divs are placed it continue to move.
What I wan't (without using a library like Particle.js) is to make it move continually but when I click, it instantly stop the div and run from their position to the grid, and on the second click, it go from the grid to the function.
I write it on this jsFiddle
Here is the Jquery :
$(document).ready(function(){
function move() {
$('div').each(function(){
var top = $(this).css('top');
var left = $(this).css('left');
var topEnd = $(this).data('top-end');
var leftEnd = $(this).data('left-end');
$(this).animate({
left: leftEnd,
top: topEnd
}, 3000).animate({
left: left,
top: top
}, 3000,move);
}
)}
move();
$('button').click(function(){
$('div').each(function(){
var position = $(this).position();
var gridTop = $(this).data('grid-top');
var gridLeft = $(this).data('grid-left');
var topEnd = $(this).data('top-end');
var leftEnd = $(this).data('left-end');
if(position.top == gridTop ){
$(this).animate({
left: leftEnd,
top: topEnd
}, 2000);
} else {
$(this).animate({
left: gridLeft,
top: gridTop
}, 2000);
}
});
});
});
And here the html :
<button>click moi</button>
<div data-grid-left="10px" data-grid-top="130px" data-left-end="250px" data-top-end="250px" style="background:green;left:-50px;"></div>
<div data-grid-left="130px" data-grid-top="10px" data-left-end="350px" data-top-end="-50px" style="background:red;top:200px;left:-200px;"></div>
<div data-grid-left="130px" data-grid-top="130px" data-left-end="500px" data-top-end="100px" style="background:blue;top:400px;left:-100px;"></div>

You can add .stop() at the end of
$('button').click(function(){
...

Sticky div - stop scrolling at certain point

I have a fixed div that follows the page when it scrolls past the top of the page.
I would like it to stop scrolling once it reaches the bottom of a particular div. I am not great with javascript.
Basically needs to remove the class .affix. But it might need an offset so that it doesn't overlap into the layout below.
I have looked at other articles but the div starts off fixed whereas mine becomes fixed.
JSfiddle: https://jsfiddle.net/8t1ddL2h/
Javascript:
var stickySidebar = $('.sticky-sidebar').offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() > stickySidebar) {
$('.sticky-sidebar').addClass('affix');
}
else {
$('.sticky-sidebar').removeClass('affix');
}
});
Any help would be appreciated
Lee

Try this Fiddle
$(document).ready(function() {
var $sticky = $('.sticky-sidebar');
var $stickyrStopper = $('.other-content');
if (!!$sticky.offset()) { // make sure ".sticky" element exists
var generalSidebarHeight = $sticky.innerHeight();
var stickyTop = $sticky.offset().top;
var stickOffset = 0;
var stickyStopperPosition = $stickyrStopper.offset().top;
var stopPoint = stickyStopperPosition - generalSidebarHeight - stickOffset;
var diff = stopPoint + stickOffset;
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stopPoint < windowTop) {
$sticky.css({ position: 'absolute', top: diff });
} else if (stickyTop < windowTop+stickOffset) {
$sticky.css({ position: 'fixed', top: stickOffset });
} else {
$sticky.css({position: 'absolute', top: 'initial'});
}
});
}
});

You can also try it just add JavaScript. it will automatic calculate height of left panel. you need to change in css when it remove the css.
var othercon = $('.other-content').offset().top;
var sliderheight = $( ".sticky-sidebar" ).height();
$(window).scroll(function() {
if ($(window).scrollTop() >= othercon-sliderheight) {
$('.sticky-sidebar').removeClass('affix');
// need to change here according to your need
}
});

Script only works properly on page refresh

I have a function that makes a side panel (.link-panel) stop when it reaches (.footer), inside (.link-panel) is (.cover). (.cover) is the div that contains all the elements of the (.link-panel) so it is fixed and technically it is the one that stops when it reaches the (.footer). My function first initializes if .control_panel is at position: inline-block. If it isn't (meaning it's display: block and the page width is <= 750px), then an else statement initializes and makes .cover's position relative.
This function is working properly only on page refresh. For example, let's say my page's size is at: 1300px. The display works correctly, but when I shrink the window size to below <= 750px, the side-menu stays fixed even if I change the css property using jQuery. The problem can only be solved if I refresh the page. Then if I start at <= 750px and resize back up, the side menu does not display correctly and I have to refresh the page again for it to display correctly.
My code
$(document).ready(function(){
var panel = $(".control_panel").css("display");
if(panel == "inline-block"){
fixedScrollBar();
}else{
$(".link-panel").css("position", "relative");
}
});
function fixedScrollBar(){
var windw = this;
$.fn.followTo = function ( elem ) {
var $this = this,
$window = $(windw),
$bumper = $(elem),
bumperPos = $bumper.offset().top + -40,
thisHeight = $this.outerHeight(),
setPosition = function(){
if ($window.scrollTop() > (bumperPos - thisHeight)) {
$this.css({
position: 'absolute',
top: (bumperPos - thisHeight)
});
} else {
$this.css({
position: 'fixed',
top: 60
});
}
};
$window.resize(function()
{
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(setPosition);
setPosition();
};
$('.cover').followTo('.footer');
}

Wrap your code in a resize event, test in your scroll event if the panel is inline-block and disable the css functions if its not:
$(document).ready(function() {
$(window).resize(function() {
var panel = $(".control_panel").css("display");
if (panel == "inline-block") {
fixedScrollBar();
} else {
$(".cover").css({"position":"relative","top":0});
}
}).trigger('resize');
});
function fixedScrollBar() {
var windw = this;
$.fn.followTo = function(elem) {
var $this = this,
$window = $(windw),
$bumper = $(elem),
bumperPos = $bumper.offset().top + -40,
thisHeight = $this.outerHeight(),
setPosition = function() {
if($(".control_panel").css("display") == "inline-block") {
if ($window.scrollTop() > (bumperPos - thisHeight)) {
$this.css({
position: 'absolute',
top: (bumperPos - thisHeight)
});
} else {
$this.css({
position: 'fixed',
top: 60
});
}
};
}
$window.scroll(setPosition);
setPosition();
};
$('.cover').followTo('.footer');
}
https://jsfiddle.net/e9dcmL2q/4/

Reposition DIV after scrolling

I have a navigation bar that repositions after scrolling down. It works with position:fixed, but while scrolling I want it to move up like all the other content that follow on the site . I the user stops scrolling it should reposition on top:
Heres a demo:
http://jsfiddle.net/gvjeyywa/7/
But I want it to be position:absolute (especially for the scrolling on the Ipad)
http://jsfiddle.net/gvjeyywa/5/
How do i let the JS overide my CSS? Here is my JS:
var isInAction = false;
var lastScrollTop = 0;
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (!isInAction){
isInAction = true;
$( "#navigation" ).animate({
top: "-" + $("#navigation").innerHeight() + "px"
}).delay(1000).animate({
top: "0px"
}, 800, function() {
isInAction = false;
});
}
}
lastScrollTop = st;
});

In the first look i think it's impossible but after some tries this code was created.
I spent long time to write this code and use several techniques and hope to be helpful.
Maybe there are simpler solutions too !!
var bitFlag = false;
var lastScrollTop = 0;
var timeoutId;
$navigation = $("#navigation");
$(window).scroll(function (event) {
var intWindowTop = $(window).scrollTop();
var intElementBottom = $navigation.offset().top + $navigation.innerHeight();
if (intWindowTop > lastScrollTop) {
if (!bitFlag) {
$navigation.css("position", "absolute").css("top", intWindowTop + "px");
bitFlag = true;
}
if (timeoutId) {
clearTimeout(timeoutId);
}
timeoutId = setTimeout(function () {
if (intWindowTop > intElementBottom) {
intDelayTime = setTimeout(function () {
$navigation.animate({
top: intWindowTop + "px"
}, 800);
}, 500);
}
}, 100);
} else {
$navigation.css("position", "fixed").css("top", "0px");
bitFlag = false;
}
lastScrollTop = intWindowTop;
});
The }, 500); section control Delay time in milliseconds and the }, 800); section control the slide down animation speed.
Check JSFiddle Demo

Div wont stop scrolling with Page

Using my code at:
http://jsfiddle.net/Pd7nm/
I want the sidebar to stop scrolling with the page at a certain point but it just keeps on going. I have tried multiple things and its not working.
This is the Javascript Method thingy
var windw = this;
$.fn.followTo = function ( pos ) {
var $this = this,
$window = $(windw);
$window.scroll(function(e){
if ($window.scrollTop() > pos) {
$this.css({
position: 'absolute',
top: pos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
});
};
$('#side').followTo(250);

Updated JQuery Fiddle is here
$(window).scroll(function() {
var height = $(window).scrollTop();
if(height>250){
$(".sidebar").css({"position":"fixed","top":0});
}
});

See This demos I have removed in "br" tag
Demos - jsfiddle.net/Nu3eu/1/