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 function only loads after page refresh

I have roughly around 50 video thumbnails on a set page.
I would like to resize them depending on the resolution.
What I have tried was using #media query in css that did not work as expected then I moved over to this.
$(document).ready(function(event) {
var width = $(window).width();
// Change thumbnail size if browser width changes (should be in real-time)
if (width <= 1300) {
console.log(width);
$('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
} else {
$('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
}
});
After inserting that script the video thumbnail size changes but as I adjust the browser the jQuery does not load and resize the thumbnail unless the page is refreshed ?
Im not sure as to why the jQuery is not loading the script in real time as the size (browser) changes.
Languages that I am using in this project : PHP, jQuery

you need to catch window resize event with jQuery and also write your code there.
$(window).resize(function() {
var width = $(window).width();
// Change thumbnail size if browser width changes (should be in real-time)
if (width <= 1300) {
console.log(width);
$('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
} else {
$('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
}
});
To reduce code repetition you can make a function and call it in both $(window).resize() and $(document).ready()

function onResize() {
var width = $(window).width();
if (width <= 1300) {
$('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
} else {
$('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
}
}
$(document).ready(onResize);
$(window).resize(onResize);
This should work, but it would be much better if it were done with css. Would love you help you with that if you want to post what you tried. If you do it with css, you will not have the jumping on the page that'll occur when the js loads and changes those classes in and out.

You can do smth like this.
Note: this is untested code
function updateSizes(){
var width = $(window).width();
if (width <= 1300) {
$('.mdl-cell').removeClass('mdl-cell--3-col').addClass('mdl-cell--4-col');
} else {
$('.mdl-cell').removeClass('mdl-cell--4-col').addClass('mdl-cell--3-col');
}
}
$(document).ready(function(event) {
updateSizes();
// do other stuff here
});
$( window ).resize(function() {
updateSizes();
// do other stuff here
});

fixed navbar issue after resize to page

I have a page if you click you are gonna see demo page and there is a fixed menu which is hidden.
after scroll page to down you'll see fixed menu set as display:block as you see on image:
but after appear if I'm resizing to window and if I turn normal desktop mode after scroll page to up as you see my fixed menu is not hiding
and another problem is if you open page mobile emulator (like on this emulator)[http://mobiletest.me/google_nexus_7_emulator/?u=http://firatabak.com/test/tur_detay.html] normally menu has to be show when I scroll page to down but it's not.
JS CODE
var navOffset = jQuery(".after-scroll-sticky").offset().top;
jQuery(window).scroll(function(){
var scrollPosition = jQuery(window).scrollTop();
if(scrollPosition >= navOffset){
jQuery(".sticky-navbar").fadeIn().addClass("fixed");
}else{
jQuery(".sticky-navbar").fadeOut().removeClass("fixed");
}
});
if ($(window).width() < 768) {
var navOffset2 = jQuery(".after-scroll-sticky").offset().top+200;
jQuery(window).scroll(function(){
var sP = jQuery(window).scrollTop();
if(sP >= navOffset2){
$(".sticky-navbar").addClass("fadeOutRightBig");
$(".menu-btn").fadeIn("fast");
}else{
$(".sticky-navbar").removeClass("fadeOutRightBig");
$(".menu-btn").fadeOut("slow");
}
});
}

Since you're defining the second jQuery.scroll function within an if statement, it only becomes active if the window width is less than 768px at the moment the script runs - it doesn't kick in when the window is resized. Instead you could try this format:
jQuery(window).scroll(function(){
if ($(window).width() < 768) {
// calculations and animation go here
}
});
Or better yet, combine the two jQuery.scroll functions together:
jQuery(window).scroll(function(){
var navOffset = jQuery(".after-scroll-sticky").offset().top,
scrollPosition = jQuery(window).scrollTop();
if ($(window).width() < 768) {
if (scrollPosition >= navOffset + 200) {
// ...
} else {
// ...
}
else if (scrollPosition >= navOffset) {
// ...
} else {
// ...
}
});
Then just make sure that you're undoing the changes made in other cases before applying the new changes.

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 () {
/* ... */
}
}

Want to keep background fixed until a certain scrolldown point

I have two background photos, I want to show the first background photo if the page is not scrolled to 500, if the page is scrolled more than 500, then I want to show the second background, both backgrounds must be positioned fixed and stretched to the screen.
Only texts must move when page scrolls, and the background must change if the scoll is more than 500.
http://jsfiddle.net/2Pfsy/37/
$(document).ready(function () {
var imageControl = function (event) {
var fromTop = $(window).scrollTop();
url = null;
console.log(fromTop);
if (fromTop < 500) {
url = 'http://i.hizliresim.com/KdrGVV.png';
} else if (fromTop > 500) {
url = 'http://4.bp.blogspot.com/-mHaVHhUegKs/UjHp6DruPeI/AAAAAAAAGx8/m_je_crr1v0/s1600/wp+cortana+screenshot+mashup.jpg';
}
$('body').css('background', 'url(' + url + ')');
};
$(window).scroll(imageControl);
});

http://jsfiddle.net/2Pfsy/43/
updated your jsfiddle
changed background to background-image in js and added background-attachment: fixed in css