Develop Reference

jQuery - Following div on Scroll that stops at specified top or bottom margin

I have this jsfiddle: https://jsfiddle.net/3ncyxnzt/
It currently works well as far as always stopping at a specified margin from the top of the page, but I'd like to make it also stop at the bottom, before it goes under/over the footer. Any ideas on how to make that moving red box stop right above the green footer? The height of the footer is 1000px, so I'd somehow need to set the moving box to stop at 1000px from the bottom.
Here's the code I have so far:
(function(jQuery) {
var element = jQuery('.move'),
originalY = element.offset().top;
var topMargin = 110;
element.css('position', 'relative');
jQuery(window).on('scroll', function(event) {
var scrollTop = $(window).scrollTop();
element.stop(false, false).animate({
top: scrollTop < originalY
? 0
: scrollTop - originalY + topMargin
}, 200);
});
})(jQuery);

I modified following line by adding static value 290 and it reached to bottom.
scrollTop - originalY + topMargin + 290

Is this what you trying to achive?
(function(jQuery) {
var element = $('.move'),
originalY = element.offset().top,
otherDiv = 1000,
staticHeight = $('.other-div').height()-$(element).height(); // Fixed number to stop the move-element before the footer
var topMargin = 110;
jQuery(window).on('scroll', function(event) {
var offset = element.offset().top;
var scrollTop = $(window).scrollTop();
// Check if the move-block gets under the footerblock
if(scrollTop < otherDiv){
element.stop(false, false).animate({
top: scrollTop - originalY + topMargin
}, 200);
}else{
element.stop(false, false).animate({
top: staticHeight //If so, make sure it gets on top of the footerblock staticly
}, 200);
}
});
})(jQuery);
I think you need an if/else statement to check if the block gets behind the height of the div called "other-div".
See the working example here: https://jsfiddle.net/crix/z578c9bo/
Hope it helps!

jQuery animate on scroll to a certain point

I'm trying to reduce an elements top padding smoothly on scroll. At the same time i want the 2 child elements to fade, 1 of them out and 1 in. Ive got the fading right but i cant get the padding top to work correctly. Can anybody see what may be wrong with my function?
$(window).scroll(function () {
$('.transitionParent').css({
'padding-top' : $(this).scrollTop()-($(this).scrollTop()/500)
});
$('.ipadOutline').css({
'opacity' : 1-($(this).scrollTop()/500)
});
$('.ipadPhoto').css({
'opacity' : 0+($(this).scrollTop()/500)
});
});
http://jsfiddle.net/pXdhB/1/
I've also tried (with no luck!)
var fromTop = $(window).scrollTop();
$('.transitionParent').css('padding-top', '-' + (100 - fromTop));

Something like this?
DEMO http://jsfiddle.net/pXdhB/7/
JQUERY
$(window).scroll(function () {
$('.transitionParent').stop().animate({
'padding-top': $(this).scrollTop() - ($(this).scrollTop() / 500)
}, 1000, function () {
// Animation complete.
});
$('.ipadOutline').css({
'opacity': 1 - ($(this).scrollTop() / 500)
});
$('.ipadPhoto').css({
'opacity': 0 + ($(this).scrollTop() / 500)
});
});

Like this?
$(window).scroll(function () {
$('.transitionParent').css({
'padding-top' : 100 - ($(this).scrollTop()-($(this).scrollTop())/500)
});
$('.ipadOutline').css({
'opacity' : 1-($(this).scrollTop()/500)
});
$('.ipadPhoto').css({
'opacity' : 0+($(this).scrollTop()/500)
});
});
http://jsfiddle.net/DkM8a/

Try this. Here is relevant code:
var st = $(this).scrollTop(),
newPt = 100 - st;
console.log(st + " " + newPt)
if (newPt > 0) {
$('.transitionParent').css({
'padding-top' : newPt
})
}
demo: http://jsfiddle.net/pXdhB/8/

How do i detect if view in on top position

I used this code to get the element to fade in when scrolling:
<script language="JavaScript">
$(document).ready(function() {
$(window).scroll( function() {
$('#floatingDIV4').each( function() {
var bottom_of_object = $(this).position().top + $(this).outerHeight();
var bottom_of_window = $(window).scrollTop() + $(window).height();
if (bottom_of_window > bottom_of_object) {
$(this).animate({'opacity':'1'}, 500);
}
});
});
});
</script>
i try to find a code that makes the element that is appearing at scroll to fade out at the top position but i don't find any. Do you have any ideas about it?
Edit:
The answers was really good but the codes didn't work.

if (bottom_of_window > bottom_of_object) {
$(this).animate({ scrollTop: 0,
opacity: 0
},'slow');
}
This will scroll to the top, and fade at the same time.
However if you was looking for the code to fade only when it has finished moving to the top, you could use:
if (bottom_of_window > bottom_of_object) {
$(this).animate({ scrollTop: 0,},
complete: function(){
$(this).animate({opacity:0})
)};
}
But so that the box is visible as it is fading, the scrollTop: value would need to be higher than 0, eg. the height of the box in px.

use this
if (bottom_of_window > bottom_of_object) {
$(this).animate({ scrollTop: 0, opacity: 0 },'slow');
}
if this answer is correct then please mark it as answer for others....

may be this help you
function show_coords(event)
{
var x=event.clientX;
var y=event.clientY;
alert("X coords: " + x + ", Y coords: " + y);
}
compare the value of X ,Y with some predefined value

How do I skip the margin top on this js?

I have been trying to figure this out; how do I get the .float-div not to margin from the top while scrolling down? I would like it to be fixed on the top of the window while scrolling. If you take away the .top-entry it will work fine. But how can I fix it without deleting the .top-entry?
http://jsfiddle.net/loktar/Kjc6k/2/
var $scrollingDiv = $(".float-div");
$(window).scroll(function(){
var y = $(this).scrollTop(),
$postEntry = $('.post-entry'),
maxY = $postEntry.offset().top + $postEntry.height(),
scrollHeight = $scrollingDiv.height();
if(y< maxY-scrollHeight ){
$scrollingDiv
.stop()
.animate({"marginTop": ($(window).scrollTop()) + "px"}, "slow" );
}
});

This is my new answer, this is a fiddle http://jsfiddle.net/Kjc6k/48/
hope this is what you are looking for :)
var $scrollingDiv = $(".float-div");
$(window).scroll(function(){
var y = $(this).scrollTop(),
$topEntry = $('.top-entry').height();
if( y > $topEntry){
$scrollingDiv
.stop()
.animate({"margin-top": y + "px"}, "slow" );
}
else
$scrollingDiv
.stop()
.animate({"margin-top": "80px"}, "slow" );
});

Adding top:0 to float-div class will easily fix this.
.float-div {
position: absolute;
background: red;
top: 0;
}
updated fiddle: http://jsfiddle.net/7KSTs/

How to stop a fixed sidebar from going in the footer?

I'm building a website. http://check.topicwine.com
Have a look to see my work.
I want to make a static sidebar. I'm using the code:
$(function() {
var offset = $("#ad-wrapper").offset();
var topPadding = 60;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#ad-wrapper").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#ad-wrapper").stop().animate({
marginTop: 0
});
};
});
});
The sidebar comes along, but it also goes where it shouldn't. I mean, it enters the footer as well. Rather, it overlaps the footer.
I want it to stop next to the grid.
Thanks, in advance. :)

Add overflow:hidden to div#content. This way we will get the proper height of the content div.
Now $('#content').height() + $('#content').offset().top is the maximum distance the sidebar should move. Which means, the sidebar's offset.top + height should not go more than this.
Add this check in your scroll handler

Set a limit for the top margin, since the sidebar can't go past the $('#main') element.
$(function() {
var offset = $("#ad-wrapper").offset();
var topPadding = 60;
$(window).scroll(function() {
var scrollTop = $(window).scrollTop(); // Store this for convenience
if (scrollTop > offset.top) {
var newMarginTop = scrollTop - offset.top + topPadding;
// The sidebar can only go so far!
var marginLimit = $('#main').height() + $('#main').offset().top - offset.top - $("#ad-wrapper").height();
if (newMarginTop > marginLimit)
newMarginTop = marginLimit;
$("#ad-wrapper").stop().animate({
marginTop: newMarginTop
});
} else {
$("#ad-wrapper").stop().animate({
marginTop: 0
});
}
});
});