We Keep Coding

Add a class when div is x amount pixels of top of viewport

I would like to have is to add a class to a div when it is, for example, 100 pixels of the top of the viewport. So not after scrolling 100px but when it is 100px below the top of the viewport. Can anybody help me with this?
<script>
jQuery(function() {
//caches a jQuery object containing the header element
var header = jQuery('#v0');
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 2939) {
header.addClass('fixed1');
}
else {
header.removeClass('fixed1');
}
});
});
</script>

Not sure if this is exactly you want to achieve, but here's the code. If the header is more than 100px away from the top (which is not very usual because then there should be something on top of the header) of the window, then the new class is added to the header.
$(function() {
var $header = $('#v0');
$(window).scroll(function () {
if ($header.offset().top - $(this).scrollTop() > 100) {
$header.addClass('blabla');
} else {
$header.removeClass('blabla');
}
});
});
UPDATE:
Depending on your feedback, this is the first solution that came up to my mind. I think that's the behavior you need. Hope that works for you:
$(function() {
var $header = $('header');
var $video = $('#v0');
var $videoContainer = $('.videoContainer');
$(window).scroll(function () {
// Here we check if video field touches the header, and add 'fixed' class
if ((($header.offset().top + $header.height()) - $video.offset().top) >= 0) {
$video.addClass('fixed')
}
// Since both video and header is fixed now I needed some other
// element to check if we are again getting away from the header
// (scrolling up again) That's why I added the $videoContainer element
// to be able to remove the 'fixed' class.
if ($videoContainer.offset().top > ($header.offset().top + $header.height())) {
$video.removeClass('fixed');
}
});
});
Updated code:
https://jsbin.com/foyoyus/6/edit?html,css,js,output

jQuery fails to set the width of a div on first load

I'm working on a site for my friend, where the fixed footer should have a margin of the size of the big picture (that's used as a menu). I also want the content div to have the same margin. But for some reason when I first load the page, content div and the footer don't have any margin at all. When I re-load the page, everything works perfectly... But I want it to work on the initial loading of the page. Here's my code:
$(document).ready(function(){
var mainPicWidth = $('#navimg').width();
var mainPicWidth2 = mainPicWidth - 10;
$('#footer').css('margin-left', mainPicWidth2)
$('#content').css('margin-left', mainPicWidth)
var wholePageWidth = $('#content').width() + 15;
$('#footer').css('width', wholePageWidth)
I also have the follow part as means of making the site responsive. Could this conflict with my previous code somehow?
$(window).bind('resize', function(e) {
if (window.RT) clearTimeout(window.RT);
window.RT = setTimeout(function() {
this.location.reload(false); /* false to get page from cache */
}, 100);
});
if ($(window).width() <= 1100) {
$('#footer').css('width', "100%")
$('#footer').css('margin-left', "0")
$('#content').css('margin-left', "0")
});
}
if ($(document.body).height() != $("*").height()) {
$('#footer').css('position', 'fixed')
$('#footer').css('bottom', '0')
} else {
$('#footer').css('position', 'relative')
}

How can I fix a div under my original header if it changes height when scrolling?

I created an additional menu bar (.secondnav) that I want to place right below the original header (#headAnnouncementWrapper) in a website. The problem is, when scrolling, the header's height changes when going from relative position to fixed at the top, and also when on mobile.
I've been trying with this:
var scrolled = 78;
var headHeight = $('#headerAnnouncementWrapper').height();
$(window).scroll(function() {
if ($(window).scrollTop() > scrolled) {
$('.secondnav').css('position', 'fixed');
$('.secondnav').css('top', headHeight);
} else {
$('.secondnav').css('position', 'relative'),
$('.secondnav').css('top', headHeight);
}
});
But I don't know how I should be calculating the headHeight variable so it changes when the height changes, and how to use that result as the top value for the .secondnav's css.

Check the height of the main header inside the scroll event. Each time the scroll event triggers, it will recheck the height. Then, the next line will adjust the top margin of the lower header to match the height of the upper header. Top-margin here replaces your position method.
var scrolled = 78;
$(window).scroll(function() {
var headHeight = $('#headerAnnouncementWrapper').height();
$('.secondnav').css('marginTop', headHeight);
if ($(window).scrollTop() > scrolled) {
$('.secondnav').css('position', 'fixed');
} else {
$('.secondnav').css('position', 'relative'),
}
});

How to avoid the "blink" when exchanging gifs?

I am creating a website where when you scroll into an area, a gif appears. It only loops once; if you continue scrolling, it changes to another gif (which plays only once, too) If you scroll back, it changes to the first gif, restarting it so it can play again.
However, when the changing occurs, there is a blink that I do not want. Here is the fiddle. And here is the javascript:
$(window).ready(function() {
var v = 0;
$(window).on("scroll", function() {
var scrollTop = $(this).scrollTop();
if (scrollTop > 100 && scrollTop < 200) {
if ($('#container').attr('data-img') != 'http://i.imgur.com/Hhmt8.gif') {
++v;
$('#container').attr('data-img', 'http://i.imgur.com/Hhmt8.gif');
$('#container').css('background-image', 'url(http://i.imgur.com/Hhmt8.gif?v=' + v + ')');
}
} else if (scrollTop >= 200) {
if ($('#container').attr('data-img') != 'http://i.imgur.com/TUAwA.gif') {
++v;
$('#container').attr('data-img', 'http://i.imgur.com/TUAwA.gif');
$('#container').css('background-image', 'url(http://i.imgur.com/TUAwA.gif?v=' + v + ')');
}
} else {
$('.imageHolder').css('background', 'blue');
}
});
});
I tried removing the ?v='+v+' from the background-image but then it won't load everytime it changes... Is there a way to keep the functioning as it is without the blinking?

Preload the second image, the blinking comes from the remote fetching time of the image. If you had preloaded the same image at any point on this website before, the new image will be loaded directly from the browser's cache and will replace the previous one without any visible transition.
$(window).ready(function () {
var v = 0;
var image = new Image();
image.src = 'http://i.imgur.com/TUAwA.gif';
$(window).on("scroll", function () {
/* ... */
}
}

Change position of div based on content & viewport height using jquery

I want to have a div be fixed at the bottom of the window when the window is taller than the content height. If the content height is taller than the window height, I want the div position to remain relative.
I currently have this mostly working, however I don't want the div to overlap the content at all. I tried various forms of below, but still not working:
var body = content+bottomBar
if (body > viewport) {
$(".bottom-bar").css({
'position':'relative'
});
} else {
$(".bottom-bar").css({
'position': 'fixed'
})
}
I also am having trouble getting the window.resize to work.
Any help would be appreciated!
http://jsfiddle.net/no05x1vx/1/

Referring to the jsfiddle linked by the OP, here are a few changes to make the code work as expected, please see the comments:
var content = $(".content").height()
var viewport = $(window).height();
// Use innerHeight here as the bottom-bar div has height 0 and padding 60px
// .height() would return 0
var bottomBar = $(".bottom-bar").innerHeight();
var body = parseInt(content)+parseInt(bottomBar)
$(window).on('resize', function(){
// Get new viewport height
viewport = $(window).height();
if (content > (viewport-bottomBar) ) {
$(".bottom-bar").css({
'position':'relative'
});
} else {
$(".bottom-bar").css({
'position': 'fixed'
})
}
});
// Trigger resize after page load (to avoid repeated code)
$(document).ready(function(){
$(window).resize();
});