We Keep Coding

I have a fixed div that I am using jquery to fade out on scroll. It works fine but if I am half way down and refersh the page the div shows up

I have a landing page with a full height and width div and a background image. I am floating a fixed div in front and fading it out as the user scrolls up. It's great unless someone refreshes the page when they're half way down, then the fixed div shows up again. How do I only show div if it's "above the fold"?
<script type="text/javascript">
jQuery(function( $ ){
$(window).on("scroll", function() {
var scrollPos = $(window).scrollTop();
if (scrollPos <= 0) {
$(".blue_bar").fadeIn();
} else {
$(".blue_bar").fadeOut();
}
});
});
</script>
.blue_bar {
width:75%;
max-width:900px;
padding: 40px 65px 40px 65px;
position:fixed;
bottom:95px;
right:55px;
background-color:rgba(0,105,170,0.8);
}

Thats because your code for fading out doesn't get executed if the page reloads.
So what you can do is enclose that logic inside a function and call it on page load as well as on scroll.
HTML
<div class="blue_bar" style="display:none;">
blah
</div>
JS
jQuery(function( $ ){
let processFade = function(){
var scrollPos = $(window).scrollTop();
if (scrollPos <= 0) {
$(".blue_bar").fadeIn();
} else {
$(".blue_bar").fadeOut();
}
};
$(window).on("scroll load", function () {
processFade();
});
$(document).ready(function () {
processFade();
});
});
Update: "The div shows up, then quickly disappears again."
The solution is pretty simple, Just start out with a hidden div :) Updated the code to reflect the same.

jquery toggle class on scroll

I'm using bootstrap as my css framework. I want to be able to toggle a class on that navbar once the user has scrolled past the big header image at the top of the website.
EDIT:
I went full derp... so I drank some more coffee and figured this out. Now if it's the best way to do it, not sure but here is what I have, and it works..
$(window).scroll(function() {
if ($(".navbar").offset().top + $(".navbar").outerHeight(true) > $('.landing-header').outerHeight(true)) {
$(".navbar").addClass("darker-bg");
} else {
$(".navbar").removeClass("darker-bg");
}
});
#SetSailMedia also answered it so I went with their answer, which was cleaner than my imo

A better way to measure is to compare $(this).scrollTop during $(window).scroll() event.
$(window).scroll( function( e ){
if( $(this).scrollTop() > $('.landing-header').offset().top ){
$(".navbar").addClass("darker-bg");
} else {
$(".navbar").removeClass("darker-bg");
}
});
Forgive me, first post of this answer kept your original .offset().bottom property, which does not exist. I've updated to .offset().top. If you wanted to measure against bottom of the element, replace that line with:
if( $(document).scrollTop() > ($('.landing-header').offset().top + $('.landing-header').outerHeight()) ){

You can toggle class when scroll somewhere with something like this:
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 1) {
$(".header").addClass("change");
} else {
$(".header").removeClass("change");
}
});
Here is jsfiddle.

How do I add a class to the body using jQuery, scrollTop, and toggleClass

I have a question concerning jQuery's scrollTop functionality, and it's ability to toggle a class based on the amount of vertical scroll.
What I am trying to accomplish is on any page with a "section.banner" class, that after you scroll past the banner a class is applied to the body tag. This will allow me to change the fill colors of several SVGs that are in the site's header, as well as a fixed positioned side nav that is for pagination.
I am terrible at javascript, and have been stuck searching and trying to get this for hours. any help will be greatly appreciated. Here's the code that I'm working with now (CodeKit is telling me it is wrong, which I am not surprised). The value of 200 is just a placeholder and will be calculated by the height of a fluid image. Full disclosure, I have no idea if the brackets and parenthesis are correct.
// Header/Fixed Pagination Banner Scroll Recoloriing (toggle class)
// Check If '.banner' Exists
if( $('section.banner').length > 0) {
$('body').scrollTop(function)()
{
if $(window).scrollTop >= 200 {
$('body').toggleClass('downtown');
return false;
}
}
}

Try something like this :
if( $('section.banner').length > 0) {
$(window).scroll(function() {
{
if ($(window).scrollTop() >= $('section.banner').scrollTop()) {
$('body').toggleClass('downtown');
return false;
}
});
}
UPDATE
There was little mistake in my code : http://jsfiddle.net/t2yp15hq/
var top = $('section.banner').position().top;
if($('section.banner').length > 0) {
$(window).scroll(function() {
if ($(this).scrollTop() >= top) {
$('body').addClass('downtown');
}
else
{
$('body').removeClass('downtown');
}
});
}
It does not work with toogleClass, the background is flashing.
UPDATE
http://codepen.io/anon/pen/wBWzXy
The solution is to recalculate the top when the window is resized :
$(window).resize(function(){
top = $('section.story-intro').offset().top - 90;
});

Trigger a sticky footer once it enters the page to reveal hidden content

I am having trouble creating a dynamic sticky footer that only sticks to the bottom once it enters the page then reveals a hidden surprise when you continue to scroll.
I have created this method but it is not exactly as I had hoped: http://jsfiddle.net/R3n7s/
jQuery(window).load(function(){
jQuery(window).scroll(function() {
if(jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() - 200) {
jQuery('h2 a').fadeIn(400);
} else {
jQuery('h2 a').fadeOut(400);
}
});
});
This works okay but my goal is to have "This is the hidden footer that will be revealed at the end" to appear to scroll with the rest of the content and then stay put once it enters the page and then to have the surprise be revealed.
Would be grateful for any suggestions. Thank you.
EDIT: hope this helps to explain what I'm hoping to achieve. The above example is my fallback solution but hopefully this can be done:
EDIT 2: I have put together a new sample here but it's not quite right. When scrolling back down, it doesn't reverse the effect but it looks very close to what I'm hoping.
However, it's seems a bit of a hack... and it does not work on mobile. If anyone has any suggestions on how to do this better and make a conditional sticky footer, it would be great to hear your suggestions.
Here is a new sample where the text scrolls up with the page but then stops and the surprise fades in: http://jsfiddle.net/R3n7s/3/
jQuery(window).load(function(){
Query(window).scroll(function() {
if(jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() - 300) {
jQuery('#footer').css({"position":"fixed", "bottom":"0"});
} else {
jQuery('#footer').css({"position":"relative", "bottom":"auto"});
}
if(jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() - 70) {
jQuery('#surprise').fadeIn(600);
} else {
jQuery('#surprise').fadeOut(600);
}
});
});

You can try changing the height of '#footer' relative to the scrollTop value change when the scroll reached that jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height() - 200 mark.
Also writing jQuery is tedious and hard to read for me :D. But if you're doing this because your using another library that uses the same dollar sign '$' alias, you can wrap your code in a jQuery function and alias '$' on it for brevity.
(function ($) {
$(window).load(function () {
$(window).scroll(function () {
var docViewTop = $(this).scrollTop(),
docViewBottom = docViewTop + $(this).height(),
docHeight = $(document).height(),
marginBottom = parseInt($('#wrapper').css('margin-bottom'));
if (docViewBottom >= docHeight - 200) {
$('#footer').height((docViewBottom + marginBottom) - docHeight)
}
if (docViewBottom >= docHeight - 50) {
$('h2 a').fadeIn(600);
} else {
$('h2 a').fadeOut(600);
}
})
});
})(jQuery);
See this jsfiddle.

Do you have something like this in mind? Inside of the if block:
{
$('h2 a').fadeIn(2000);
$('p').fadeIn(400);
} else { ... }
And with matching CSS:
#footer p {
display: none;
}

I did something very similar on this website. I set a data-attribute on each of the pages. As you scroll through them, I trigger various actions based on which slide is active and finally, on the 5th slide, I slide everything up slightly to make room for the footer, and the footer appears. If you scroll back up, the animation reverses and the footer retracts back down.
var activeslide = parseInt($(this).find('.active').prev().data('index'));
if (activeslide == 1) {}
if (activeslide == 2) {}
if (activeslide == 4) {}
if (activeslide == 5) { displayFooter(); }
var p = null;
function displayFooter() {
if(this===p) {
setTimeout(function(){
$('footer').css({'z-index':'0'});
},2000);
$('footer').stop().animate({'margin-top':0},2000);
$('.main').stop().animate({'top':0},2000);
$('#iphone').stop().animate({'top':'75px'},2000);
p = null;
return false;
} else {
$('footer').css({'z-index':'999'});
$('footer').stop().animate({'margin-top':'-255px'},2000);
$('.main').stop().animate({'top':'-65px'},2000);
$('#iphone').stop().animate({'top':'20px'},2000);
p = this;
return false;
}
}

Infinite Scroll in both directions

I've been working on a small website and I want it to be scrollable and looped both upwards and downwards.
I made a jsfiddle to show my problem. Currently I'm working with this method:
$(document).ready(function(){
$(window).scroll(function() {
if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) {
$(window).scrollTop(1);
}
else if ( $(window).scrollTop() == 0 ) {
$(window).scrollTop($('body').height() - $(window).height() -1);
}
});
});
http://jsfiddle.net/2LDFA/
My problem is, that there is no transition, this method only works if the content at the top and bottom is exactly the same.
Any Ideas how I can add the same div to top and bottom every time the user reaches the end?

Here is a working fiddle: http://jsfiddle.net/2L23c/
And here is the javascript:
(function($){
$(document).ready(function(){
var html = $(".what").html();
var what = '<div class="what">'+html+'</div>';
$(window).scrollTop(1);
$(window).scroll(function() {
if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) {
$(".what").last().after(what);
if ($(".what").length > 2) {
$(".what").last().prev().remove();
$(window).scrollTop($(window).scrollTop() - $(".what").first().height());
}
}
else if ( $(window).scrollTop() == 0 ) {
$(".what").first().before(what);
$(window).scrollTop($(".what").first().height());
if ($(".what").length > 2) {
$(".what").last().remove();
}
}
});
});
})( jQuery );

Well, if you're using jquery, you can move the divs around on the page fairly easily, using insertAfter or the like. When you get to the bottom, grab the first div on the page and move it down to right after the last one. There's some interesting and slightly finicky work to be done in making sure you always get the right one, but it should totally be doable.