We Keep Coding

Elements position changing as you scroll to bottom of page

https://jsfiddle.net/181zpvf2/
I am having some issues getting the <aside> element to stick to the bottom of the #main container when the user scrolls past it.
I have the <aside> element stick to the top once the user starts to scroll past it using the elements offset.top property, but since there is not a offset.bottom property, I am running into some issues figuring out how to get the math to work.
Any thoughts?

There's no offset().bottom but there's offset().top and height(). With that you get offset().bottom.
var offsetTop = $("aside").offset().top;
var offsetBottom = $("aside").offset().top + $("aside").height();
Now, with this you can do your math. Ask if you get stuck :-)

Use offset.top + window.innerHeight. This adds the window height to the offset of the screen so you get the position of the bottom of the screen.
var PositionFromTop = offset.top + window.innerHeight;
document.getElementById('asideElement').style.marginTop = PositionFromTop;

Keeping element in a fixed position until it intersects with another element, causing it to change to absolute positioning

So I have a product page where the description is a fixed element relative to the viewport. However, when scrolling all the way to the bottom, the element will overlap with the footer content and it doesn't look good.
What I'm trying to do is to use jQuery to determine the exact point where the bottom of the description element starts to overlap with the top of the footer element, and to change it to absolute position with a bottom equal to the position of the footer element. The result I want is so that it "sticks" to the top of the footer when it would otherwise overlap it.
Here's my code:
$(window).scroll(function() {
//offset of bottom of element from top
var osProduct = $('.product-single__meta').offset().top + $('.product-single__meta').height();
//exact position where footer begins
var osFooter = $('.return-link-wrapper').offset().top - 83;
if(osProduct >= osFooter) {
//change fixed positioning to be sticky to that exact pixel
$('.product-single__meta').css('position','absolute');
$('.product-single__meta').css('bottom', osFooter);
}
else {
$('.product-single__meta').css('position','fixed');
$('.product-single__meta').css('bottom','auto');
}
});
.product-single__meta is the description div, and .return-link-wrapper is the footer div.
However, when I scroll past this overlapping point, the description div starts to really quickly switch between fixed and absolute positioning, rather than behaving how I want it to. Needless to say, the end result is not as expected. How can I achieve this behavior?

I believe this is the code you're looking for set 100 to whatever you have where your div element is distant exactly from top of the page. change rest to your needs. this is in jquery btw
(function ($) {
$(document).ready(function(){
// first we set the position to relative
$('.product-single__meta').css('position','relative');
// position absolute when user scrolls more than 100px
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before setting css
if ($(this).scrollTop() > 100) {
$('.product-single__meta').css('position','absolute');
} else {
$('.product-single__meta').css('position','relative');
}
});
});
});
}(jQuery));

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.

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.