We Keep Coding

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));

How can I create overlapping images that reveal themselves as you scroll

I am looking to create a scrolling effect similar to that shown here: http://www.seaham-hall.co.uk/
However I am unable to achieve the desired effect, and inspecting the sites code gives me no hints. Quite difficult to google for as it is also quite difficult to describe. The closest I can get to finding a solution is this JSFiddle:
http://jsfiddle.net/xtyus/1/
(function($){
/* Store the original positions */
var d1 = $('.one');
var d1orgtop = d1.position().top;
var d2 = $('.two');
var d2orgtop = d2.position().top;
var d3 = $('.three');
var d3orgtop = d3.position().top;
var d4 = $('.four');
var d4orgtop = d4.position().top;
/* respond to the scroll event */
$(window).scroll(function(){
/* get the current scroll position */
var st = $(window).scrollTop();
/* change classes based on section positions */
if (st >= d1orgtop) {
d1.addClass('latched');
} else {
d1.removeClass('latched');
}
if (st >= d2orgtop) {
d2.addClass('latched');
} else {
d2.removeClass('latched');
}
if (st >= d3orgtop) {
d3.addClass('latched');
} else {
d3.removeClass('latched');
}
if (st >= d4orgtop) {
d4.addClass('latched');
} else {
d4.removeClass('latched');
}
});
})(window.jQuery);
However I am not sure that is going in the right direction, this pulls images up and covers the previous image, but notice on the Seaham Hall site the images don't appear to move up at all, they are stationary and become revealed as you scroll.
How do I recreate this effect? My initial thought was to have the first image shrink as you scroll from 1000px down to 0px, and the second image grow to 1000px, and as you continue to scroll this image then shrinks and the third grows, and so on. However this means that after the first image all the other images have a starting size of 0px and there would technically be no scrolling on the page to begin with, so that is an issue.
My second thought is that perhaps the second image is fixed to the page, the first image slides up revealing the second as you scroll, the second image would not appear to move. Once the first image has gone off the top of the page the second image is detached from the page and allowed to move up with scrolling, while the third image is attached and revealed as the second moves up, this would give the exact effect seen in the Seaham website but I have no clue of it is the correct answer.
If anyone can point me to tutorials or a JSFiddle with a basic concept I can probably figure it out from there. Just stumped what direction to approach this from.

That's a nice effect. Here's one way to do it.
Put each image in a fixed position div, which takes up the entire viewport (initially) and has overflow:hidden.
Set each div's z-index to be higher than the next div's.
As the window scrolls, adjust the height of the divs as a function of the window height times the div's position (index) in the DOM, minus the window's scrollTop:
$(window).scroll(function() {
$('.D').each(function(index) {
$(this).css({
height: $(window).height()*(index+1) - $(window).scrollTop()
});
});
});
Additional content will need a higher z-index than the image divs. And note that z-index works with positioned elements only.
Fiddle

Your desired effect isn't technically a parallax background, but it's close enough that parallax jQuery frameworks should work for you.
I would suggest you research jQuery Parallax plugins as they'll likely provide the functionality you'd like without much custom work. Of course since you're dealing with large images it's also best to keep an eye on the resource management; a good plugin should be fairly efficient but others may be slow or resource intensive.

Check this jquery plugin:ScrollMagic
usage: taken from github
The basic ScrollMagic design pattern is one controller, which has several scenes attached.
Each scene has a definite start and end position and defines what happens when the container is scrolled to the specific offset.
/*
Basic workflow example
*/
// init controller
var controller = new ScrollMagic();
// assign handler "scene" and add it to controller
var scene = new ScrollScene({duration: 100})
.setPin("#my-sticky-element") // pins the element for a scroll distance of 100px
.addTo(controller); // add scene to controller
// adding multiple scenes at once
var scene2 = new ScrollScene();
var scene3;
controller.addScene([
scene2,
scene3 = new ScrollScene({duration: 200}), // add scene and assign handler "scene2"
new ScrollScene({offset: 20}) // add anonymous scene
]);

Fake position Fixed inside a Div but relative to window top, while scrolling

I had to fake a fixed position of a div inside its container but relative to window by giving it an absolute position and giving it the top value in with jquery's scrollTop(). So far it seems like a decent solution but the fixed effect only work in Chrome. In firefox and ie10 it moves slowly and ie9 it do something like vibrate
if ($.browser.webkit) {
//First I had to do some hack in order to get the scrollTop() same return in all browsers
var bodyPos = $('body').scrollTop();
}else{
var bodyPos = $('html, body').scrollTop();
}
//then I can calculate the point relative to the top of the window
var pos1 = $('#four').position().top;
var imgPos = bodyPos - pos1
$('#fixed1').css({'top': imgPos})
Anybody knows how to make this effect crossbrowser?
Thanks

I've finally fixed, as you see in this case I wanted to make a fake fixed position of an image inside it's container while scrolling.
Well, Occam's Razor:
I created a container for the image and give it an absolute position width height 100% and top 0.
Then I set the image as background of the container with fixed attachment "et voilà" the job is done.
Sometimes this kind of things happen :)

jQuery popup resize on phone

I have a small problem with a popup image displaying on a mobile browser. The popup is displayed on a mouse click and then a resize function sets the size according to the viewport size.
This works fine and is centred in the viewport when opened, but when I tilt the phone to landscape I call a resize function but it doesn't seem to work properly as the newly resized image is off centre in the viewport, this is then repeated when the phone is returned to portrait mode. I have tested the code on android chrome browser.
The resize function I have used is as follows:
$(window).resize(function () {
$(".dialogContent").css({
position: 'absolute',
left: ($(window).width() - $(".dialogContent").outerWidth()) / 2,
top: ($(window).height() - $(".dialogContent").outerHeight()) / 2
});
});

Sorry about posting as an answer but I still can't comment yet.
Based on what you have said I am a little confused about the mouse click portion of your code.
Surly the resize function is not being called when the user clicks the button for the first time. so are you sure that it is working he way you want at all?
To answer your question with a limited amount of understanding of what your code looks like
it should be something like:
$(".dialogContent").css({
position: 'absolute',
left: '50%',
'margin-left': $(".dialogContent").outerWidth() / 2,
'margin-top': $(".dialogContent").outerHeight() / 2,
top: '50%'
});
From my understanding to centre align positioned absolute you set it's top and left to 50% and then offset the positioned absolute element by half.
Now that I'm home I can make you a fiddle here

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.