We Keep Coding

floating div without delay

I am trying to add a floating div when user scrolling the contents, It almost working but getting little delay on the animation, I need that the floating div should animate along with scroll when scrollTop reach the floating div
var $scrollingDiv = $("#scrollingDiv");
$(window).scroll(function(){
var y = $(this).scrollTop(),
maxY = $('#footer').offset().top,
scrollHeight = $scrollingDiv.height();
if(y< maxY-scrollHeight ){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop()) + "px"}, "fast" );
}
});
Fiddle link

Two issues that you can change:
Using JavaScript to animate DOM is usually slow.
Change the animate function to CSS: transform: translateY()
Select items from DOM outside of the scroll function, so it will be done only
once.
var $scrollingDiv = $("#scrollingDiv");
var $footer = $('#footer');
var $window = $(window);
$(window).scroll(function(){
var y = $(this).scrollTop(),
maxY = $footer.offset().top,
scrollHeight = $scrollingDiv.height();
if(y< maxY-scrollHeight ){
$scrollingDiv
.css({"transform": "translateY(" + ($window.scrollTop()) + "px)"});
}
});
see the fiddle link here

How to get scroll direction on specific div

My page have a div called #product. I need to fill progress bar when user scroll in #product div. How can I do it using jquery. Thanks.
if (/* page scroll to #product div */){
var scrolled = ??? //percentage of scroll on div
}

You can get current scroll position with this:
currentScroll = $(this).scrollTop() + $(this).innerHeight()
where 100% scroll is:
maxScroll = this.scrollHeight
Then your current progress percentage will be:
(currentScroll / maxScroll) * 100
Use this code:
$('#product').bind('scroll', function() {
var currentScroll = $(this).scrollTop() + $(this).innerHeight(),
maxScroll = this.scrollHeight;
var scrolled = (currentScroll / maxScroll) * 100;
});
See example here.
EDIT:
To let the div come to top on browser scroll add:
$(document).bind('scroll', function() {
$('#product').css({ position: absolute; top: 0; });
});

how to scroll top and bottom

$(document).ready(function() {
$("#Wrapper").click(function () {
var th = $(this);
if (!th.hasClass('down')) {
console.log("ret");
th.addClass('down').stop(true).animate({
"top": "50px"
}, 1000, function() {
$('body').scrollTop(th.height());
});
} else {
console.log("sdffsdsff");
th.removeClass('down').stop(true).animate({
"top": "-400px"
}, 1000, function() {
$('body').scrollTop(th.scrollTop());
});
}
});
});
I have this jquery code for scroll from top to bottom and bottom to top when click on wrapper. this code works but i want this should scroll slowly from top top bottom and bottom to top when click on "wrapper" div
this is my original fiddle
http://jsfiddle.net/HtTXB/17/
how to do that? Thank you

Try this:
$("#Wrapper").click(function () {
var h= $(this).height(),
top= $(window).scrollTop(),
pos= top > h/2 ? 0 : h;
$('html, body').stop().animate({
scrollTop: pos
},1000);
});
scrollTop is set to 0 when the window is scrolled more than half-way, and it's set to the height of Wrapper when scrolled less than half-way.
Working Fiddle

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.

scroll to next div already in browser

I have a series of divs that are 100% height with a scroll to function that takes you to the next div out of the viewport on background click. However, if the next div is already slightly in the viewport the whole thing is counted as being visible and the scroll to bypasses it. Can anyone offer direction on how to get the script to scroll to the div even if it's partially in the viewport already?
Codepen here.
If you begin scrolling slightly in the codepen and then click on the background you'll see that it doesnt scroll you to the div that's already in the viewport but the div after that.
$(document).ready(function() {
// get initial nav height
var $window = $(window);
var wst = $window.scrollTop();
var th = $('div.top').height();
var currentSlide = $('#wrapper').data( 'current-slide', $('div.slide').eq(0) );
$('div.scroll_images').css({ height: 'auto', overflow: 'visible', top: 0 });
$('div.scroll_images div.inner').css({ position: 'absolute', top: 0 });
$('div.slide').each(function() {
$(this).css('padding',function() {
return (($(window).height()-$(this).height())/2)+'px 0'
});
});
// scrollto for click on slide
jQuery.fn.scrollTo = function(hash) {
$this = $(this);
st = $this.offset().top - th; // subtract nav height
$('html, body').animate({ scrollTop: st }, 550
);
}
$('#wrapper').click(function(e){
//get the current slide index from the body tag.
$this = currentSlide.data( 'current-slide' );
$next = $(".slide:below-the-fold");
if($next.length) {
$next.scrollTo($next.attr('id'));
//Save the next slide as the current.
$('#wrapper').data( 'current-slide', $next );
} else {
//Throw us back to the top.
$('div.slide:first').scrollTo($('div.slide:first').attr('id'));
//Save the first slide as the first slide, which
//Cycles us back to the top.
$('#wrapper').data( 'current-slide', $('div.slide:first'));
}
})
//Images fade in
$('img').hide();
$('img').each(function(i) {
if (this.complete) {
$(this).fadeIn();
} else {
$(this).load(function() {
$(this).fadeIn();
});
}
});
//Stop links affecting scroll function
$("a").click(function(e) {
e.stopPropagation();
});
});
(function($) {
$.belowthefold = function(element, settings) {
var fold = $(window).height() + $(window).scrollTop();
return fold <= $(element).offset().top - settings.threshold;
};
$.extend($.expr[':'], {
"below-the-fold": function(a, i, m) {
return $.belowthefold(a, {threshold : 0});
}
});
})(jQuery);

Here's what I might try to do: go through each div in the series. Find the div who's offset() is closest to $(window).scrollTop(). Now, find the next() div after the "current" one and scroll to it.
For comparing the offset() of each div, try something like this:
var closest = $('[selector]:first');
$('[selector]').each(function() {
var oldDistance = Math.abs(closest.offset() - $(window).scrollTop());
var newDistance = Math.abs($(this).offset() - $(window).scrollTop());
if(newDistance < oldDistance) {
closest = $(this);
}
}