Develop Reference

Scroll down then scroll right then scroll down again

I have 3 separate divs.
First one 100vw and 100vh.
Second one has 100vw and 100vh and it has a div(".move") inside of 400vw and 100vh - which will be moving later on to the left and to the right.
Third one is 100vw and 100vh.
When I scroll down, I want the second div to get position fixed. (at this point div third jumps into div second position).
Then I want to scroll to the right of div ".move".
At the end of scroll I want to add position absolute to div second and keep scrolling down through div third.
I dont know how much should I keep adding to scrollX (or translateX(-?px) or left = -? , doesnt matter I guess) so it is equal to normal scrollY at the end.
Also when I scroll quickly it jumps to div third and div ".move" barely get scrolled.
I would like to do it either useing scrollbar or mousewheel.
It should look like in this page:
bitsens.com/
And this is my current code:
codepen.io/Baromaro/pen/yLLMWMM
(the code is so sad..)

Scroll a DIV to top when user scrolls to bottom of page; hide DIV when user scrolls back up

I've got three DIVs right under each other along the flow of the document, and all except the first DIV is set to display: none;. Therefore the first DIV (main_content) is the only DIV of the three that's visible when the page loads.
I need a jQuery script that would allow the next DIV to appear, and scroll to the top of the viewport (for clarification, this increases the document height) when the user has scrolled to the bottom of the page I also need the script to hide the newly appeared DIV when the user scrolls back up.
This is what I have to far; it works but there's some weird looping going on.
$(window).scroll(function(){
showDiv();
});
function showDiv(){
if( $(window).scrollTop() + $(window).height() >= (($(document).height())-10)){
$("#main_content2").fadeIn(1000);
$('html,body').animate({scrollTop: ($("#main_content2").offset().top - 88)}, 800);
$(document).height('auto');
$(window).height('auto');
}else{
$("#main_content2").fadeOut();
$(document).height('auto');
$(window).height('auto');
}
}
Not sure if my question is clear to you guys but let me know and I'll try to word things a little better. Thanks in advance.
EDIT: Thanks for the reply freedom. But this is not what I was looking for. I do not want the next DIV to affix to the top. I want the next DIV to appear, and snap to the top when the user scrolls to the bottom of the document. After the DIV snaps to the top the user is able to scroll through it as he would normally until he reaches the bottom of that DIV and then next DIV (3rd) appears and snaps to the top. I apologize if I wasn't clear enough before.

hide the div on scrolling and show it when cursor reaches to a certain distance from the top

Description :
I have a div with width: 100% of the body and is sicked to the top of the page.
Now when I start scrolling I want the div to hide itself when it is no longer the part of visible page after scrolling e.g slideUp "But" when I start to take my cursor near the top of my page the div should re-appear when the cursor is at certain distance from the top of the page
Now I could use the following demo code
$(document).on("scrollstart",function(){
alert("Started scrolling!");
});
but then
1) I dont how to detect if the div is out of the visible page after scrolling
2) and how to detect the y-distance of the cursor from the top of the page...
any one??

Just an idea:
1. Try getting offset of scroll top and compare it with the height of div that you want to hide (if div height is less than scroll top, hide it)
2. Maybe you can get cursor position using something like this: http://api.jquery.com/event.pagex/

Inability to scroll after turning div from absolute to fixed positioning using jquery

I have a div that gets a 'fixed' class added to it once the user scrolls past a certain point in the parent div. The fixed class simply changes the child div from absolute positioning to fixed positioning.
However, a problem occurs when the user scrolls to a certain point when the 'fixed' class is added (as specified by the 'begin variable' in the js). The user loses the ability to scroll up or down for a number of seconds. And to make matters more complicated, this problem only occurs on the first of six parent divs that uses this code.
Here's the jquery code that adds the 'fixed' class:
var begin = 164;
$("#portfolio_window").scroll(function () {
var y = $(this).scrollTop();
if (y >= begin) {
$('.details').addClass('fixed');
} else {
$('.details').removeClass('fixed');
}
});
If I change the 'begin' variable to something like 600, the user loses the ability to scroll around 600px from the top of the div.
You can try to reproduce the problem at http://dev.zachboth.com/
Here's the easiest way that I've been able to reproduce the problem:
Use Safari
Clicking 'Various Logos' in the 'Work' section
Scrolling down quickly once the 'Various Logos' section appears
It may take several attempts to actually have the problem occur

I can explain your problem:
The problem is that on the "page" you mention being broken has you scrolling in div#portfolio_window. The position:fixed element you mentioned is positioned relative to the window. When you scroll on that element, it's trying to scroll the window (not the parent div).
http://jsfiddle.net/NThY7/
The solution is a bit more involved. I'll hop back on later with a solution.

How to see if an element in offscreen

I have a list of divs, and everytime I want to go to the next div I press a key. I need to check if that div is offscreen, and if so, I need to move the screen to show that div either using anchors or another method.
What is my best option for doing this?
Just to clairify, offscreen in my case means something that can't be seen right now without scrolling down. So if you are on the StackOverflow Home Page at the top, the last question on the entire page is offscreen.

Best option is to scroll your page to the element by getting its y-offset, and checking window height and calculating where to scroll page and then you can animate your page to that point.
//height of your div
var scroll = 250;
//animate from actual position to 250 px lower in 200 miliseconds
$(window).animate({"scrollTop": "+="+scroll+"px"}, 200);
so this is not the complete code but it might give you the idea.
check out jquery scrollTop
hope it helps,
Sinan.