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

make a div appear and disappear between 2 heights on scroll down - - and reverse on scroll up

In an earlier thread (How to make a div appear and disappear between 2 heights?) I found a script to add to my html that makes a div appear at a specified height then disappear at a second specified height.
Unfortunately, when I scroll up, the divs all remain showing - they don't disappear in the same order they appeared.
Anyone know if there's a way to modify this script so that a div (with an id two_b) that has a fixed position is visible when and only when the user is scrolling between 632px and 3352px from the top of the page?
<script type="text/javascript">
$(document).ready(function(){
$("#two_b").hide();
$(window).scroll(function(){
if($(window).scrollTop()>632){
if($(window).scrollTop()>3352){
$("#two_b").fadeOut();
}
else
{
$("#two_b").fadeIn();
}
}
});
});
</script>
Here's the site I'm working on. It's for educational purposes and not approved by Theo Chocolate: http://www.saritaschaffer.com/wp
New version after Eyal's suggestion:
<script type="text/javascript">
$(document).ready(function(){
$("#two_b").hide();
$(window).scroll(function(){
if($(window).scrollTop()>632 && $(window).scrollTop()>3352){
$("#two_b").fadeOut();
}
else
{
$("#two_b").fadeIn();
}
});
});
</script>

The problem is that you nested the if statements.
Replace:
if($(window).scrollTop()>632){
if($(window).scrollTop()>3352){
$("#two_b").fadeOut();
}
else{
$("#two_b").fadeIn();
}
}
With:
if($(window).scrollTop()>632 && $(window).scrollTop()<3352){
$("#two_b").fadeIn();
}
else{
$("#two_b").fadeOut();
}
What happened was that for the elements to fade out they scrollTop position must be bigger than 632 and smaller than 3352.
To achieve your goal you need to unite those statements and put the else if either of them is false.

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

How to fadeIn to fadeOut elements while scrolling?

I have more than 70 divs on my page.
I don't want to show all the divs at once until user scrolls page.
I am trying to hide overflown elements on my page, while user scrolls the page , hidden divs should be fading in again.
But i am not able to hide overflown elements and not finding any way to fadeIn overflown elements again if window is scrolled.
However i gave it a try-
$(function(){
$(window).css("overflow","hidden");
var lengthy= $('.content').length;
alert(lengthy);
var scrollbottom= $(window).scrollTop()+$(window).height();
$(window).scroll(function(){
$(document).css("overflow","hidden");
if($(window).height() >scrollbottom)
{
$(document).fadeIn();
}
});
});
Jsfiddle
How can this be done?

EDIT your Jquery to somthing like this
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 10) {
//Add something at the end of the page
}
});
What this does is the scroll happens when it's reaches 10px before end of page and not necessary the very end of the page. It's not necessary to have it, but it gives greater control to define at what point page should scroll...
This Example will show you what i think you want
http://www.webresourcesdepot.com/dnspinger/