We Keep Coding

Fix div when scrolled at its bottom

I have a collapsible aside nav (so don't know the height of it) and a div under it, which should change position to fixed when scrolled at it's bottom.
I achieved this, but when I scroll back at top, the div stays fixed and I can't find solution to make it static again at the point where it was at the beginning, since I don't know where the exact point is.
Here is a fiddle (I explain my solution in js comments): https://jsfiddle.net/1krLnv7q/2/.
Could anybode help me, please? I am stuck.

EDIT
You can define your vars outside of the scroll() event, otherwise it will cause a buggy animation.
Like this
$(function(){
//top offset of static/fixed div
var staticOffset = $('.static').offset().top;
//window height
var wpHeight = $(window).height();
//point when the user scrolls at the bottom of div
//static/fixed div height + top offset - viewport height
var treshold = staticOffset + $('.static').height() - wpHeight;
$(window).scroll(function(){
//if user scrolls below the divs bottom (treshold) it becomes fixed
if ($(window).scrollTop() > treshold){
$('.static').addClass('fix');
}else{
$('.static').removeClass('fix');
}
});
});

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.

Can someone explain why this code works-making div stick to top after scoll?

I love that this code works, but I cannot, for anything, wrap my head around WHY it's working?
Here is the jfidddle
Here is the code:
jQuery(document).ready(function($) {
clone = $('div').clone();
$('div').after(clone);
$('div:last').hide();
offset = $('div:first').offset();
var fromtop = offset.top;
$(document).scroll(function() {
doc = $(this);
dist = $(this).scrollTop();
if (dist >= fromtop) {
$('div:last').show();
$('div:first').css({
'position': 'fixed'
});
} else {
$('div:first').css({
'position': 'static'
});
$('div:last').hide();
}
});
});
I guess I am not understanding how scrolltop and offset are interacting or what they REALLY are, as in their true positions on the page. The code says if ScrollTop (the scrollbar position?) is higher than the value of the div's offsettop , then make the div sticky. But if ScrollTop is the position of the scrollbar, isn't it true that sometimes the scroll bar position could be lower than the div's position BEFORE the div is at the top of the page? What is it about being at the top of the page (offsettop of 0?)--and only at the top of the page, never before-- that makes offsettop a smaller value than scrolltop?
Really confused, and I don't want to just copy the code without understanding what it's really doing.

scroll Top is actually how many pixels 'up' the page has moved (or how many pixels you have moved down the page)
Basically all that happens is the .offset sees how far down the page (from the top of the page) the 'sticky' menu is
When you scroll to that point the bar becomes fixed (which is basically relative to the window instead of the document)
When you scroll back up it just switches back to being positioned in the document.
For clarity
.offset = 200px say - this is how far down the document the sticky menu is
.scrollTop - is 0 when the page loads
When you scroll down the page 201px
.scrollTop > .offSet -> so make the bar fixed (remember fixed is relative to the window - not the document)
If you scroll back up the process is reversed.

It's actually very simple. Let me try if I can make it a bit clear to you:
Whenever you want something (let's say some div) to get fixed on top as you scroll down, you need two things:
You need the current vertical position of your div. And you calculate that by using offset().top
You need to track how much user has scrolled. And you calculate that by using scrollTop()
So in your case, if the current position of your div is top: 100, then as soon as your scrollbar reaches the number 101, your div will get the class of .fixed
By default, the scrollbar vertical position is 0 when the page loads.

How do I get scrollable div to not add height to containing divs when screen resolution height is too small to fit the scrolling div?

I'm using javascript to move a div down the page as you scroll. I found the code online and it works for what I needed. The problem I'm running into is for lower screen resolutions (ipad) where you have to scroll down to see the footer past the main content area, the scrolling div pushes down to get onto the screen, changing the height of the divs and body, which makes you be able to endlessly scroll down the page. The div scrolls by adding a margin to the top of the div being moved as you scroll. I've tried setting heights on all the containing divs and body but nothing seems to be working css-wise, and I don't know enough about javascript to set some sort of condition.
The page I'm working on is http://gwa-inc.com/pages.aspx?pid=31&name=Americana
If you make your browser window height smaller and scroll down the page, you'll see what I'm talking about. Is there an easy fix to this that I'm missing?
Script being used is:
var $sidebar = $(".subMenuWrap"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 30;
$window.scroll(function () {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});

You should absolutely position the box that needs to scroll, so that it will be pulled out of the flow of the page. Then you can more closely control where that box goes and can keep it from pushing the footer down further.