Develop Reference

Hide Div on Scroll

I have this Div that shows up on button click and then lies over some other content, where the button to show the content lies too. I want to hide this div again by scrolling. I have some code which works, but only with limitations which makes it unusable.
I tried the following code:
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.hidden-content').fadeOut();
}
});
This actually works but here is the problem: The button I use to show the content does not work anymore while hover-animations in this div still works everywhere. So I do not think this is a problem about a hidden div with a high z-Index value what lies above of everything.
I also tried the following code based on some help of the user Ned Hulton for hiding this div on a button click which worked perfectly fine, but I didn't get the translation for the scroll event right as it seems.
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('.hidden-content').animate({"opacity":"0"}, function(){
$(this).css({"zIndex":"-1"})
});
});
And maybe it will also help if I show you the code to make the div appear by a click on a button:
$('.clickable-content').click(function(e) {
$('.hidden-content').css({
"opacity":"1",
"z-index": "9"
});
});
Hope someone can help me out! Thak you for reading!

JavaScript replace content by sliding more content in without losing height

So i currently have a setup that allows for a button to be pressed, the current content is hidden, and more content scrolls in from the right. However my problem is that for the briefest of moments the footer, which sits below the content, moves up before moving back down below the content just loaded in.
This fiddle best illustrates the problem: http://jsfiddle.net/9Dubr/766/
My Code:
$('#rightButton').click(function(){
var toLoad = 'page.html #content';
$('#content').hide("fast", loadContent);
function loadContent() {
$('#content').load(toLoad,'',showNewContent);
}
function showNewContent() {
$('#content').show("slide", {direction: "right" }, 1000 );
}
return false;
});
Thanks for your help

The fiddle doesn't seem to work for me, but it sounds to me like your footer is simply trying to occupy the empty space left behind by the previous content. In which case, you can try giving the parent container of your content a fixed height just before hiding it. You can then unset the height once the next content is loaded, that way there isn't really any empty space for the footer to try and occupy.
Untested code:
$('#content').parent().css({height: $('#content').height()});
$('#content').hide("fast", loadContent);
...
function showNewContent() {
$('#content').show("slide", {direction: "right", complete: function() {
$('#content').parent().css({height: ''});
} }, 1000 );
}
If you'd like to make it more visually appealing, you can animate the height so the footer will get pushed/pulled more smoothly.
Hope this helps.

It may be because the page is allowed to resize the lengths of divs. A few suggestions that might work is:
Quick Fixes:
Hiding your footer until the person is at the bottom of the screen
Making your footer a static size and maybe even making the footer position final.
Adding a fixed size container around your objects as mentioned in a previous comment.
This way atleast it won;t bother the footer in any way.
Fix without changing footer:
It is obviously a load problem when the button itself is pressed. Because as I understand from your code when the button is pressed and then you are adding this new content to your page right before using the slide effect.
I would suggest you preload the content when first opening the page and then just use the .slide() when the button is pressed.

css scrollLeft animate moves body vertically

Hi I am trying to write a function that horizontally scrolls a div to a specific point given a parameter. Everything functions properly except when the document/body is scrolled down and the function is executed by pressing a letter. When this happens the whole document/body is scrolled up to the top. I really can't figure out what I am doing wrong here but I don't want the page to scroll to the top.
an example of the code can be found at http://www.hokosounds.com/testRedesign/store-test.html#
Thanks for the help!

$(document).ready(function(){
$('a').click(function(e, _letter){
e.preventDefault();
var _letter = $(this).html();
scrollToLetter(_letter);
});
scrollToLetter = function(_letter) {
var _distance = $('#'+_letter+'Start').position().left+$('#store-nav-artist-names').scrollLeft();
$('#store-nav-artist-names').animate({
scrollLeft: _distance
}, 800);
};
});

The page will scroll to the top if you don't handle the click event to either return false or event.preventDefault http://api.jquery.com/event.preventDefault/
It will stop the behavior of a link being clicked.

stopping draggable function on scroll bar

I have this div called 'header'. which is draggable and has a scroll bar. to prevent the div dragging when clicking the srollbar I have this code below, however it is not effective if the thumb is at the absolute top and someone clicks the the top arrow or scrolls up with the thumb. it will then start to drag. same thing for the bottom. How can I prevent this from happening. Thanks.
$("#header").draggable({
start: function() {
if ($(this).data("scrolled")) {
$(this).data("scrolled", false).trigger("mouseup");
return false;
}
}
}).find("*").andSelf().scroll(function() {
$(this).parents(".ui-draggable").data("scrolled", true);
});

If you use 'cancel' option, you can solved it easily.
Please check their official doc
http://api.jqueryui.com/draggable/#option-cancel

Animate a div after scrolling away from the top of the webpage

I'm currently trying to make a div appear from behind another div after the user scrolls away from the top of the page.
I'm hoping to do this using animate so that it slides out. Like this...
http://jsfiddle.net/xaYTt/99/
But I can't figure out how to make the red box stay behind the blue box until the user scrolls away from the top of the page.
I also need to reverse this when the user scrolls back up to the top of the page, so the red box slides back under the blue box again.
Can anyone help me out?

This is not the most elegant solution, but it works nonetheless.
http://jsfiddle.net/37LZ5/
Components:
Use $(document).scroll as a trigger to know when scrolling
Use scrollTop() to know how far we're scrolling (0 = top)
Remember state to make sure animation doesn't get triggered a zillion times (var away)
Use .stop() to prevent weird behaviour when halfway through one animation, another animation gets triggered

I think you are looking for this take a look at this demo
Working demo
Code
$(document).ready(function(){
//$('#bottom-box').animate({'margin-top': '200px'}, 1500);
$('body').hover(function(){
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
}, function(){
$('#bottom-box').animate({'margin-top': '50px'}, 1500);
});
});

If my understanding about your question is correct, this is what you are looking for
Since you said, "User scrolls away from the top of the page", I added a div to be at the top of the page.
var isAlreadyOut=false;
$("#divPageTop").mouseover(function(){
if( isAlreadyOut==true)
{
$('#bottom-box').animate({'margin-top': '60px'}, 1500);
isAlreadyOut=false;
}
else
{
$('#bottom-box').animate({'margin-top': '200px'}, 1500);
isAlreadyOut=true;
}
});
Here is the jsfiddle version
http://jsfiddle.net/xaYTt/103/

I did something with jsFiddle that might be what you are after, if I understood your question correctly.
Basically, the red box will animate when you scroll the window more than the distance of the blue box.
Not 100%, just a quick mock up to see if that's what you want.
(When you scroll, click on the scroll bar arrows for more accurate results)
Demo here: http://jsfiddle.net/peduarte/xaYTt/104/