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

How do I set initial CSS values with JavaScript on load?

I'm really new to JavaScript, and I'm still trying to learn a lot. I found a snippet that allows for horizontal parallax on scroll. I'm using the following code to set the 'right' css property:
var $horizontal = $('.scroll');
$(window).scroll(function () {
var s = $(this).scrollTop(),
d = $(document).height(),
c = $(this).height();
scrollPercent = (s / (d - c));
var position = (scrollPercent * 2500) + ($(document).width() / 2);
$horizontal.css({
'right': position
});
});
This works really well once the scroll happens, however, on the load, the 'right' property is, by default, set to 0. It only snaps to my position variable once I start scrolling. How can I call this variable on load and have it modify with scroll?

Just call the scroll function when the window is finished loading:
$(window).scroll(function () {
...
});
$( window ).load(function() {
$(window).trigger('scroll');
});

Flickering element on fixed sidebar on top scroll using offset

I'm trying to create a fixed sidebar menu. Everything works fine but the sidebar element is flickering once you scroll to the top if you had scroll below.
var windowHeight = $(window).height();
var headerHeight = $('.js-site-header').outerHeight();
var sidebarThreeBlocks = (windowHeight-headerHeight)/3;
var sidebarTwoBlocks = (windowHeight-headerHeight)/2;
var sidebar = $('.js-sidebar');
$('.js-triple-nav a').css({height: sidebarThreeBlocks});
$('.js-double-nav a').css({height: sidebarTwoBlocks});
if (!!sidebar.offset()) {
$(window).scroll(function(){
var stickyTopSidebar = sidebar.offset().top;
var windowTop = ($(window).scrollTop())+headerHeight;
if (stickyTopSidebar < windowTop) {
sidebar.css({ top: windowTop });
}
else {
sidebar.css({ top: '3.125em' });
}
});
}
I used to put the var stickyTopSidebar = sidebar.offset().top; above with all the other variables but I would always get an error on the javascript console as it seemed the variable was undefined. Even so, the sidebar then worked perfectly, with no flickers but all the rest of javascript wouldn't work. Any hints or help?

Change margin-top as user scrolls

I am trying to get a div to scroll up at the same amount of pixels as the user scrolls down the page. For example, in Google Chrome when using the mouse wheel, it scrolls down in about 20px intervals. But when you scroll down using the handle, the scrolling amount varies.
Here is my code so far:
var scrollCtr = 50;
$(window).scroll(function(){
scrollCtr = scrollCtr - 20;
$('div.nexus-files').css('margin-top', scrollCtr + 'px');
});
There are a few problems with this:
The user scrolling varies
It needs to subtract from margin-top if scrolling down and add to margin-top if scrolling up
Here is an example:
http://www.enflick.com/
Thanks for the help

You're doing it the wrong way, what you are trying to do should be done using position: fixed on div.nexus-files
div.nexus-files{position: fixed; top: 0;}
but anyway - if you still want to know what you can do with the scroll event - you better get to scrollTop of the document and set the margin-top to the same value
window.onscroll = function(event){
var doc = document.documentElement, body = document.body;
var top = (doc && doc.scrollTop || body && body.scrollTop || 0);
document.getElementById('nexus-files_id').style.marginTop = top+'px';
}
I'm using pure Javascript instead of jQuery because of the overhead that might be crucial when the browser need to calculate stuff in a very short amount of time (during the scrolling). [this can be done even more efficient by storing reference to the element and the doc... but you know..)
I used id based selector to get the specific element instead of class based
AND I SAY AGAIN - this is not how you should do what you were trying to do

Why not using the actual scroll offset as reference or position ?
// or whatever offset you need
var scrollOffset = document.body.scrollTop + 20;
// jQuery
var scrollOffset = $("body").scrollTop() + 20;

Finally Got it
Here is the code I used to accomplish the task.
Most of the code is from http://enflick.com and I modified it to work with my individual situation.
jQuery(window).load(function(){
initParallax();
});
// parallax init
function initParallax(){
var win = jQuery(window);
var wrapper = jQuery('#wrapper');
var bg1 = wrapper.find('.nexus-files');
var koeff = 0.55;
if (bg1.length) {
function refreshPosition(){
var scrolled = win.scrollTop();
var maxOffsetY1 = 450;
var offsetY1 = scrolled * koeff;
var offsetY2 = scrolled * koeff - (maxOffsetY1 * koeff - offsetY1);
if (offsetY1 <= maxOffsetY1 * koeff - offsetY1) {
bg1.css("margin-top", +-offsetY1+"px");
//alert(+-offsetY1+"px");
}
}
refreshPosition();
win.bind('resize scroll', refreshPosition);
}
}

How to return variable from jquery function

can you help me please...
How to return variable from jquery function
var height = $(window).height();
$(window).resize(function(){
var height = $(window).height();
return height;
});
setInterval(function() {
$('div').append( 'Index: ' + height );
}, 500);

You don't need to return. Try this:
var height = $(window).height(); // define "height" here
$(window).resize(function(){
height = $(window).height(); // update "height" variable,
// don't user "var" here.
// because using "var" will redefine
// "height" again and no longer contain the
// updated value on window resize
// out of this resize function scope
});
setInterval(function() {
$('div').append( 'Index: ' + height );
}, 500);

When you use var you're creating a new variable, not overwriting the original. You'll want this instead:
var height = $(window).height();
$(window).resize(function() {
height = $(window).height();
});
// ...

I suppose the answer to your question depends on how you want to return it. Console? Alert? A div or other element? See below for a list.
console.log(height)
alert(height)
$("#elementID").html(height); // or whatever selector and method work for your case
I suppose you could also convert that $(window).resize block into a function, then call that function. That should work, too.