Develop Reference

Javascript, jQuery scrolling

I am trying to create a scroll effect when the user scrolls up or down.
What I intend to do is scroll by the maximum possible amount(reach top/bottom if screen.height is bigger than what remains)
My code for now intends just simple scrolls but it still doesnt really work. sometimes it doesn't go down or it get's stuck an I can't scroll anywhere. anyone who can help?
$(document).ready(function() {
var lastScrollTop = 0;
var height = Math.max($(document).height(), $(window).height());
$(window).scroll(function(event){
var st = $(window).scrollTop();
if (st > lastScrollTop) {
var d_scroll = Math.min(screen.height, height - $(window).scrollTop() - screen.height);
//alert(d_scroll);
$('html,body').animate({
scrollTop: $(window).scrollTop() + (d_scroll) }, 1000);
} else if(st < lastScrollTop) {
var d_scroll2 = Math.min(screen.height, $(window).scrollTop());
$(window).animate({
scrollTop: $(window).scrollTop() - d_scroll2 }, 1000);
}// else { alert(screen.height + st); alert(height);}
lastScrollTop = $(this).scrollTop();
});
});

Footer animates up when you reach bottom of screen, but fails to animate down when you scroll back up

I have a footer that animates up when the user scrolls to the very bottom of the page. Right now it is currently staying in the post-animation state after animation completes. However, I'm trying to get it to animate back down once the user scrolls back up the page a little bit.
Here's my code so far. This correctly animates the footer up, but not back down:
$(window).scroll(function() {
var i;
i = 0;
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
i = 1;
$("footer").animate({
marginBottom: "-22px"
}, 500);
}
else if (i > 0 && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
$("footer").animate({
marginBottom: "-156px"
}, 500);
i = 0;
}
});

You're resetting your "flag" variable, i on every scroll.
Here's a fiddle demonstrating a workaround (and what I mentioned in the comments): http://jsfiddle.net/px8y9/
var isShowing = false;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
alert("Show Footer");
isShowing = true;
} else if (isShowing === true && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
alert("Hide Footer");
isShowing = false;
}
});

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

JQuery window scroll top and bottom

I am able to load my ajax when scrolling all the way to the bottom, i am trying to figure out how i can modify the piece of code below so that it works only when the window is scrolled to the top ?
$(window).scroll(function () {
if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
//this works here for scrolling bottom
}
else if ($(document).height() >= $(window).scrollTop() + $(window).height()){
//i tried checking for greater than the window scroll but that didn't owrk
}
});

When the scrollTop() returns the vertical position of the scroll bar 0 it means the scroll bar is in top position.
$(window).scroll(function () {
if ($(window).scrollTop() == 0){
alert("Up");
}
});
Or you can update your code as follows,
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() < $(document).height()){
alert("Up");
//i tried checking for greater than the window scroll but that didn't work
}
});

Check this or perhaps you should check if height of document and window object to make sure they're not null.
$(window).scroll(function () {
if ($(document).height() <= Number($(window).scrollTop() + $(window).height())) {
//this works here for scrolling bottom
}
// only greater i think, not equa
else if ($(document).height() > Number($(window).scrollTop() + $(window).height())){
}
});

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