Develop Reference

While scrolling top finding a strange behaviour

I am trying to animate the menu bar(fixed positioned) when its scrolled down the opacity should change to 0.6 and when scrollTop() returns 0 its opacity should be 1.
Its working fine when I scroll down but when I scroll to the top sometimes the code works some times its opacity remains 0.6.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$('.navbar').animate({opacity:0.6});
}
if($(window).scrollTop() <= 0){
$('.navbar').css('opacity','1');
}
});
});

try
if ( $(window).scrollTop() > 0)
{
$('.navbar').animate({opacity:0.6});
}
else
{
$('.navbar').css('opacity','1');
}

jquery fadeTo() while scrolling, fading out when going down but not fading in when going back up

I've been trying to fade out a splash when scrolling down, and fading it in when scrolling back to the top of the page. It seems to work ok when scrolling down, but when I go back, it doesn't fades in. I tryed using fadeIn and FadeOut instead of fadeTo but didn't get a proper behavior
The code is actually pretty simple:
var splashTop = $('.splash-container').offset().top;
$(window).scroll(function () {
if ((splashTop - $(window).scrollTop()) < 50) {
$('.splash-container').stop().fadeTo("slow", 0);
} else {
$('.splash-container').stop().fadeTo("fast", 1);
}
});
And here is the jsFiddle example:
jsFiddle

If you just need to check if the scroll is at the top or not then you don't need to check the position of the Splash, Try:
$(window).scroll(function () {
if ($(window).scrollTop() > 0) {
$('.splash-container').stop().fadeTo("slow", 0);
console.log('p')
} else {
$('.splash-container').stop().fadeTo("fast", 1);
console.log(box1Top)
}
});
Check the Demo Fiddle
Edit
Now why your code doesn't work? ... Because you are always getting a value less than 50:
splashTop = 8 always
-
$(window).scrollTop() = more than 0
Then the result is always negative or 8 as max, you can never have a number more than 8 and your else condition is useless.

Onscroll top of page: defining end of the page

I'm using the following javascript for the top of page logo/section before the footer here:
<div id="townEnd">InsideTown</div>
<script>
$(document).ready(function(){
// hide #townEnd first
$("#townEnd").hide();
// fade in #townEnd
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 1000) {
$('#townEnd').fadeIn();
} else {
$('#townEnd').fadeOut();
}
});
// scroll body to 0px on click
$('#townEnd a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
</script>
How would I calculate when the logo should fadein at the end of the page? I just used 1000 as an example. It only seems to work when I scroll really fast too.

First, you should just use this.scrollTop instead of $(this).scrollTop() - it might not look like much to you, but it is a HUGE thing.
On the same path, you can use this.scrollHeight to get the height of the scrollable area. Subtract this.innerHeight to get the maximum scroll position, then subtract about 30 pixels to give yourself some padding.
if( this.scrollTop < this.scrollHeight - this.innerHeight - 30)
You should also have a boolean to keep track of the state of the element, maybe isfadedin, which you update. Then, only call fadeIn and fadeOut if the state changes. This will save a LOT of processing time!
Vanilla JS is awesome :p

How to show a DIV when users reach X pixels from the bottom of the page

I'm using the code below to show a banner once users reach the bottom of the screen. Issue is that I noticed that most users don't scroll down till the end. What should I modify to show my div .banner3 at, let's say, 150px from the bottom?
Many thanks
$(document).ready(function() {
$(window).scroll(function() {
if($("body").height() <= ($(window).height() + $(window).scrollTop())) {
$(".banner3").fadeIn()
} else {
$(".banner3").css("display","none");
}
});
});

$(window).height() + $(window).scrollTop() - 150
Easy stuff :)
You could also perhaps rewrite the code a bit nicer. The scroll event is fired many times, so you could do some caching of the selector.
$(function() {
var banner = $(".banner3");
var bodyHeight = $("body").height();
$(window).scroll(function() {
if (bodyHeight <= $(window).height() + $(window).scrollTop() - 150) {
banner.fadeIn();
} else {
banner.hide();
}
});
});

edit: forgot to hide the banner again...
http://jsfiddle.net/kasperfish/RBndE/1/
$(document).ready(function() {
$(window).scroll(function() {
if($(this).scrollTop() > $(window).height()-150){
$('.banner').fadeIn();
}else{
$('.banner').fadeOut();
}
});
});

fadeIn issues with with scrolling

I'm trying to have my content fade in when reaching a certain proximity to to respective ends of the page. The fade works fine when the trigger is set to the very top and bottom but when I set a distance (200px) the fade no longer works and the content simply appears.
$(window).scroll(function(){
if($(window).scrollTop()<=200){
$('#about .content').stop(true,true).fadeIn("5s");
}
else {
$('#about .content').stop(true,true).fadeOut("10s");
}
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200) {
$('#work .content').stop(true,true).fadeIn("5s");
} else {
$('#work .content').stop(true,true).fadeOut("5s");
}
});

What is happening is that you have two functions working against each other:
The first function has an "if-else" statement and the second function as well.
That means that each function does something EVERYTIME you scroll.
There are multiple ways of solving this.
The way I would solve it is using a variable and updating the constraints.
Let's say we have a variable onScreen that has value 1 if the paragraph is on the screen and value 0 if it isn't:
For example:
<div style="height: 800px">Example of scroll with fadeIn, fadeOut.
<p style="margin-top:300px;">These paragraphs will go away when you have scrolled
more than 10 pixels from the top. They will appear again when you have scrolled
to a proximity of 50 pixels from the bottom. They will also appear if you go
within a proximity of 10 pixels of the top again.</p>
</div>
Now for the jQuery code:
var $onScreen = 1;
$(window).scroll(function(){
if($(window).scrollTop() < 10){
if ($onScreen == 0)
{
$("p:first").stop(true,true).fadeIn("slow", "linear");
$onScreen = 1;
}
}
if($(window).scrollTop() <= 20 && $(window).scrollTop() >= 10){
if ($onScreen == 1)
{
$("p:first").stop(true,true).fadeOut("slow", "linear");
$onScreen = 0;
}
}
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 50) {
if ($onScreen == 0)
{
$("p:first").stop(true,true).fadeIn("slow", "linear");
$onScreen = 1;
}
}
});
Now this is not the most concise way of doing it and I didn't mean to do so: by making the code a bit more extensive I hope you can follow why it works now and didn't work before (such that you actually learn from it).
I prepared a live example for you on Fiddle: http://jsfiddle.net/ycCAb/4/
I hope this answers your question. Good luck!