We Keep Coding

How to link page scroll to a div element scroll? Or how to scroll div element using page scroll?

So I have an issue with scrolling the page and some div with content inside it.
There is a .container at the bottom of the page and footer goes after it.
When an user gets to the bottom of the page there should be possibility to continue scrolling the page but exactly the .scrollable container should be scrolled.
By default we can scroll .scrollable div's content if mouse cursor is over it. But I need to somehow link common page scroll to this .scrollable div's scroll.
How does this problem can be solved?
Here the JSFiddle link to make the issue more clear

$(window).on('mousewheel', function(e) {
//scrolling bottom
if(e.originalEvent.wheelDelta /120 <= 0) {
//checks if we reached bottom
if($(this).scrollTop() + $(this).height() == $(document).height()) {
$('.scrollable').scrollTop($('.scrollable').scrollTop() + 10);
}
}
});
EDIT: After lots of digging I've managed to build a script for exactly what you need
NOTE: The event is currently bound on mousewheel but there are more types of scrolling such as: dragging, clicking, arrow keys and I'm not aware of function to cover them all and do the thing you want in the same time.
I forked your Fiddle

How do you make an image slide into the screen and slide off during a certain phase of the website scrolling?

I have seen many websites introduce a nice feature when you're scrolling down the website and suddenly during a certain part of the website scroll, lets say during 40% to 70% of the screen full page an image will appear from either left or right side and sit in the middle of the screen until the user will scroll up/down far enough to which the image will slide outwards.
How could I implement such a feature?

Well, here are some pointers:
detect and handle the scroll event: window.addEventListener("scroll", function(event){ ... });
get current scroll position: window.scrollY || document.documentElement.scrollTop (you will probably compare it with another value):
window.addEventListener("scroll", function(event){
var position = window.scrollY || document.documentElement.scrollTop;
if(position > ...)
...
...
});
may be you want to use a library, look for "scroll animation (js, library)", there's many

How to check if the element is near the bottom of the screen?

How is the way to check if some the element is near the bottom of the screen let say 100px from the bottom? (not the bottom of page).
The thing is i wanted that when this element is clicked, an another element will shown up and will slide to top rather to down if is near the bottom of the screen?

You can identify when an element is under 100px from the bottom of the screen with the following condition (without the need to use jQuery):
if (window.innerHeight - element.getBoundingClientRect().bottom < 100){
// the desired place
}

I think what you want is a button that displays when the user is almost at the bottom of your screen and when the user clicks on it, it scrolls them back to the top of the screen.
You may want to use JavaScript to achieve this.
Using the jQuery library
<script type="text/javascript>
$(document).scroll(function(){
var x = $(this).scrollTop();
if (x > 250) //The 250 is the total height of div that the user scrolls to before the button displys for the user to click
{
$('.button').fadeIn();
} else {
$('.button').fadeOut();
}
$('.button').click(function() {
$('html, body').animate({
scrollTop: $('.topmost_div').offset().top}, 'slow'); //tell the page to scroll back to the div at the top of the page.
});
});
</script>
Hope this helps

Scroll to element when user scrolls from top down

I am trying to do a effect like on the App Builder Website.
When the user is at the header with the background image/video and scrolls down, the site scrolls down to the next div/section/etc. .
If the user scrolls back up and the image/video part is reached, the page scrolls to the top of it. I have tried the following code but there is bug i can't find:
function scrollto(where){
$('html,body').animate({ scrollTop: $(where).offset().top - 65}, 800);
console.log('Scrolled to ' + where);
closeMenue();
}
var lastScrollTop = 0;
var scroll = $(window).scrollTop();
$(window).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
if (scroll == 0){
scrollto('.about');
}
else{
}
} else {
if (scroll == 530){
scrollto('.parallax');
}
else{
}
}
lastScrollTop = st;
});
It is working fine, but only once. Is there a Plugin I can use?
Sorry for my bad english :(

The site you posted is making use of fullPage.js plugin.
It works using CSS3 transitions with a fallback to jQuery when needed.
If you don't want to use jQuery, there's even a pure javascript version for it in development but functional.

dont use jquery for smooth transitions.
is better do that things with css methods.
check this if want use any library

So, here's what I believe I'm seeing on their site if you want to do something similar:
No scroll bar; you'll need to make your top-most container have overflow: hidden. It might be best to capture scroll wheel events. See here for more details: Get mouse wheel events in jQuery?
The active viewport gets a class "active". They're presumably using it to keep track of which viewport to scroll to next and maybe to determine
So, in your scroll wheel event handler, you'll need to:
Determine first if you're going up or down. (Outlined in the SO link above)
You'll need to find the next sibling div/viewport/container/whatever that's not active.
You'll want to move the active class to that appropriate sibling (previous/next depending on up/down) and scroll it into view using scrollTop.

Making a div scroll with the page after a certain distance

I have a web page set up with 225px of header space and then the body begins. I have a floating div that I want to follow with the body as the page gets scrolled down. The div follows but I dont want it to start until the user has scrolled past the header. Here is a picture example:
Once the user has scrolled past all the red (225px), then the blue div should being scrolling with the page.
The current problem is that the div begins moving the second the user scrolls through the header and ends up 225px below the top of the page.
I believe something like this is what I need, but it doesn't seem to do anything (at least in chrome)
if($(window).scrollTop() > 255)
{
//begin to scroll
$("#floating_list").css("position","fixed");
$("#floating_list").css("top",0);
}
else
{
//lock it back into place
$("#floating_list").css("position","relative");
}
Thanks!

You haven't set any event listener. Include JQuery and here's the working code:
$(document).on("scroll", function(){
// or as a shorthand $(document).scroll(function(){
if($(document).scrollTop() > 255)
{
//begin to scroll
$("#floating_list").css("position","fixed");
$("#floating_list").css("top",0);
}
else
{
//lock it back into place
$("#floating_list").css("position","relative");
}
});