We Keep Coding

I have a navigation bar that becomes fixed at the top after scrolling 1 full page. After scrolling halfway, it skips the rest of the page

Full code: http://liveweave.com/XGPWVt
I "inspected" it with chrome, and it happens when the #header_nav goes from relative to fixed. I tried changing the third line to if ($(window).scrollTop() > elementPosition.bottom) { but then the navigation bar doesn't ever get fixed at the top.
var elementPosition = $('#header_nav').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('#header_nav').css('position', 'fixed').css('top', '0');
} else {
$('#header_nav').css('position','relative');
}
});
This only happens when I make the preview window FULLSCREEN.
It also doesn't happen when I set the header heights to px values. But I need them as percentages for scaling.

Script to stop fixed div from scrolling under another div?

https://rebecca-milazzo-test.squarespace.com/featured#/btr/
I have the page meta-data set to fixed positioning, but as the users scroll, the div doesn't stop and scrolls under the thumbnails at the bottom of the page. I have researched other scripts, but they all are created to stop the div at a certain pixel height and not another element.
Any help is greatly appreciated.

You're going to want to create a function that checks the windows scroll position to see whether you've scrolled to the thumbnails section. When you've scrolled to the thumbnails section, set the fixed elements position to absolute and set its top to the windows scroll position plus the original top value. For those like myself who thought z-index would suffice, OP doesn't want the element to go either underneath the thumbnails section or above the thumbnails section on scroll.
function checkposition(){
fixedelement = document.querySelector(".project-meta");
stopelement = document.querySelector("#project-thumbs");
stoppoint = stopelement.scrollTop - fixedelement.clientHeight - parseInt(fixedelement.style.top);
if (window.scrollY >= stoppoint){
fixedelement.style.position = "absolute";
fixedelement.style.top = [defaulttophere] + window.scrollY + "px";
} else {
fixedelement.style.position = "fixed";
fixedelement.style.top = [defaulttophere];
}
}
window.addEventListener("scroll", checkposition);
Let me know if this works or not, I threw this together pretty quickly.

Sticky sidebar is jolty if its shorter than the window height?

I have a sticky sidebar that when you scroll becomes fixed when the bottom of the sidebar is in view.
If the sidebar exceeds the length of the page as it does in this demo all works fine when you scroll and is exactly what you would expect.
However if the sidebar is shorter than the window height as in this demo, it seems to be jumping when you scroll and I can't work out how to get it to stop jumping and to be smooth. In other words it should only be fixed when the base of the sidebar hits the base of the window.
I'm not great with jQuery so any help would be greatly appreciated.
$(function () {
if ($('.leftsidebar').offset()!=null) {
var top = $('.leftsidebar').offset().top - parseFloat($('.leftsidebar').css('margin-top').replace(/auto/, 0));
var height = $('.leftsidebar').height();
var winHeight = $(window).height();
var footerTop = $('#footer').offset().top - parseFloat($('#footer').css('margin-top').replace(/auto/, 0));
var gap = 7;
$(window).scroll(function (event) {
// what the y position of the scroll is
var y = $(this).scrollTop();
// whether that's below the form
if (y+winHeight >= top+ height+gap && y+winHeight<=footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', winHeight-height-gap +'px');
}
else if (y+winHeight>footerTop) {
// if so, ad the fixed class
$('.leftsidebar').addClass('leftsidebarfixed').css('top', footerTop-height-y-gap + 'px');
}
else {
// otherwise remove it
$('.leftsidebar').removeClass('leftsidebarfixed').css('top', '0px');
}
});
}
});
Is it possible to combine the two instances? So if its shorter stay relative till the sidebar reaches the bottom, then act as it is now if the sidebar is longer?

The code works just as intended. This is actually a conceptual problem.
Picture how it would work first. The way you described it working seems to be exactly how it's working in your demo. When the sidebar is longer than the page, the scrolling page reaches the bottom of the sidebar before the leftsidebarfixed is added. That would be impossible with a shorter sidebar.
You may want to consider fixing the sidebar to the top, instead of the bottom (as most websites with sticky sidebars do) or having a taller header, so that the sidebar starts at the bottom.

How to keep scrolling div at the bottom of the page

I have this js that works great until I get to the bottom of the div, it then is relative and jumps back up to the top. I would like it to stay at the 2000px location instead of jumping back to the top as I continue to scroll down (we have a very large footer). Any ideas? I have looked through a lot of these, and I have been unable to get any codes to work that indicate they could do what I am trying to do.
$(window).scroll(function () {
if ($(window).scrollTop() >= 2000) {
$('#scrollingDiv').css({ position: 'relative' });
} else {
$('#scrollingDiv').css({ position: 'fixed' });
$("#scrollingDiv").css("top", Math.max(0, 170 - $(this).scrollTop()));
}
});
Fiddle
Here is the general idea of it. The main difference is that our footer is very large (i was not able to add the footer without major editing) so I need it to stop at a point that is at the end of the image but also stay at the bottom of the image as I continue to scroll down to view the footer.

Alright I figured it out. The way this code works is that the div will be fixed and scroll down (located at the top of the browser) until it hits 2000px. Then it switches to relative positioning and will stay at 1750px so you can continue to scroll down without the div coming with you. When you scroll back up, it will pick up the div and bring it back to the top with you.
$(window).scroll(function () {
if ($(window).scrollTop() >= 2000) {
$('#scrollingDiv').css({ position: 'relative' });
$('#scrollingDiv').css({ top: '1750px' });
} else {
$('#scrollingDiv').css({ position: 'fixed' });
$("#scrollingDiv").css("top", Math.max(0, 170 - $(this).scrollTop()));
}
});

Sidebar move after user scrolls down x amount

Let's get straight to it: When the user scrolls x amount, I want the sidebar to begin to move.. Now, once the sidebar reaches its' end, I want it to stay fixed and scroll to the footer. Here's what I got.
http://jsfiddle.net/Ajp44/
Here's my Javascript:
$(document).ready(function() {
// Cache selectors for faster performance.
var $window = $(window),
$sidebar = $('#anchor'),
$sidebarAnchor = $('#right');
// Run this on scroll events.
$window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $sidebarAnchor.offset().top;
if (window_top > div_top) {
// Make the div sticky.
$sidebar.addClass('stick');
$sidebarAnchor.height($sidebar.height());
}
else {
// Unstick the div.
$sidebar.removeClass('stick');
$sidebarAnchor.height(0);
}
});
});
For some reason JSfiddle isn't displaying what the Javascript is doing, but if you run it on your PC you can see. Whenever the user scrolls passed the ending of the sidebar, the sidebar doesn't scroll down with them like it is suppose to, instead, it jumps of to the right side of the page...
So my question is this: how do I stop the sidebar from jumping to the side of the page, and keep it within the restraints of the parent DIV?
Cheers!

Don't do right : 0 in your stick class. In fixed elements, the position attributes are relative to the viewport.
https://developer.mozilla.org/en-US/docs/Web/CSS/position#Fixed_positioning