We Keep Coding

Hold element in place at specific offset to top then release after 1000px scroll

I'm trying to do something that I think has to do with parallax or sticky libraries but having a bunch of trouble.
I'd like to let the user scroll normally, and then when a particular div is a particular value (lets say 232px) from the top of the screen, I want to hold the element in place (ie give it position:fixed). This part is easy to get the offset:
$('element')product1[0].getBoundingClientRect().top;
Then, let the user continue to scroll with the element in place so they can see the background continue to move with the scroll (I have a large height background with a nice linear-gradient).
Then after the user scrolled for about 1000px I want to release the element and let it continue to move up with the scroll. The same should happen when the user scrolls back up - it holds for a bit then releases.
I've tried a bunch of different things and combinations of libraries, pure css, JS, etc. Nothing works well. Everything has an issue. Would love to see a clean solution.
Things I've tried:
-JQuery sticky libraries (could not find one that does or is customizable to what I need)
-Vanilla JS tracking position (had jumping issues on release - element would fly far away on release, not continue from release position)
-CSS, specifically translateZ
The ideal setup is:
<div style="height: 230vh; background: linear-gradient(coolOne)">
<div class="containerToStickTemporarily">
<p class="textOnLeft">Hi</p>
<img src="myImage.png"/>
</div>
</div>
And I'd like to have multiple of these in a row.

Something like that.. I guess
$(window).scroll(function(){
var top = $(window).scrollTop();
$('element').css({ position: top > 230 && top < 1000 ? 'fixed' : 'relative' });
})

Div appear after scroll past a div

I know there are a lot of tutorials to let a div appear after scroll down a certain amount of pixels.
But what I want is to let a div appear when the user scrolls past another div. And when they scroll back up it has to disappear again.
Why not after an amount of pixels? I want to use this for my menubar to appear on the top of my page after the user scrolls past the banner image. BUT when you scale down the browser (mobile, tablet, small screen...) the banner image will scale down to! The image will not be the same height as before. The menubar would appear to late or to earlier;) that's why I want the menubar to appear after that image (div).
Hope you guys can help!

Now that we are talking in abstract terms, I will try to explain to the best of my ability.
Can't you get the current position of the targetDiv (the div, after which scrolling down would show the menubar), and then use the same code of making the menuDiv appear after scroll down a certain amount of pixels.
This answer might help you in getting the current position of the targetDiv.

So, do the following steps and let me know how it went:
1) Get jquery.appear
2) Apply the disappear event on your selector:
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
// this element is now outside browser viewport
});
3) On that event just make the other div dissapear.
$('theStuffToHide').toggle()
4) Final result
$('someselector').on('disappear', function(event, $all_disappeared_elements) {
$('theStuffToHide').toggle()
});
This should be the only thing you need.
Cheers, hope it helps.

You can check for the pageoffset to cross the amount (top offset of the target + height of the target element ) and show the div.
And when the pageoffset comes less that the calculated amount, make the div hide

Scroll DIVs together

I am wondering if anyone can tell me in theory how to lock 2 DIVs together when scrolling.
I need to create a large graph but can only show a small portion at a time. I need the labels to show in a stay locked to the data, but remain visible.
I'm essentially trying to replicate the manner you can scroll through an excel worksheet.
So the labels on the side would scroll vertically with the data but stay fixed when scrolling horizontally. and vise versa with the labels on top.
This is all going to end up in a Rails app that will display a timeline of employees that worked for my fire dept over the last 100 years.
the years will be along the top, and the ranks and positions will be along the side (50-60 lines)
I'll only have the room to display 15 years and about 20 lines at a time and still be readable.
Any ideas would be appreciated.

You can put listeners on both divs and then whenever one of them changes, make sure both of them get the same vertical offset.

You could try position:fixed to lock the position of a div relative to the viewport while scrolling http://www.w3.org/Style/Examples/007/menus.en.html

$('#center').ready(function(){
var left
$('#center').on("scroll", function(){ //activate when #center scrolls
left = $('#center').scrollLeft(); //save #center position to var left
$('#top').scrollLeft(left); //set #top to var left
});
});

How do I set scroll top of a web page

I am facing a problem with set scroll bar top position. Actually what I need is; I am using a JQuery Keyboard plugin where for all the elements I need to display the virtual keyboard at the center bottom of the page and its done.
But the problem I am having is when I have a input field near to the bottom of the page where that page does not display the scroll bar (It means there is no need of overflow because all the elements I have is visible in my page). Since I am displaying the virtual keyboard at the bottom of the page and when the focused element also is at the bottom of the page I need to initiate the scroll bar and page should go up by scroll down automatically so active input field element is visible to me.
I tried to set the scroll bar by using this
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where _scroll_top is my current scroll top position, _el_top is focused elements top position, _el_height is my focused elements height and _keyboard_top is the top position of the keyboard.
Now the problem is when I have a more height page (It means scroll bar size is small i.e. scroll bar size may be around 60% of the screen.Height) scrollTop is correctly working and I can see the active input element even though keyboard is visible. But when I have small height of a page (Example: scroll bar size is around 90% or it may be same size of screen.Height) scrollTop is is not working correctly so the active input element is not visible and it is behind to virtual keyboard.
How can I set the scroll top correctly so I will be able to see the active input element then at the bottom of that element I can see virtual keyboard.
Please see the attached image. That is where actually active input element should be displayed.
First Image is Before Enable the keyboard: Just see the element's position, sroll top
Second Image is After Enable the keyboard: Just see the element's position, sroll top
This is what I need when my scroll bar size is big (Around 90% of the screen.Height)
Thanks in advance.
P.S: I am extremely sorry if I confuse by the way I expressed my question.

use jQuery('html,body').scrollTop('other things here');

Thanks for the responses.
I have found the solution for my question.
At the bottom of the page I have created a dummy div element.
<div id="scroll_dummy"></div>
Initially this div will be having zero height. I applied the height of the keyboard to this div. As a result your page size will be increased so it can easily move the scroll top. At the time of close again revert back this style.
Then at the place of I am applying scrollTop I have done this.
$("#scroll_dummy").css("height", _keyboard_height);
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where
_scroll_top : scroll top position
_el_top : active element top position
_el_height : active element height
_keyboard_top : keyboard element top position
_keyboard_height : keyboard element height position
Done with this... :)

How to calculate if mouse pointer at bottom page using Prototype?

I want to create auto-hide menu, just the same thing like http://www.ringvemedia.com/shanghai-photos but the problem is that I also have content that is scrolling down so if I calculate pointerY it will return mouse absolute position so it could be 1000...999999 depends on how many content you have to scroll down, that why I cant use something like "if (pointerY+50) >= document.viewport.getDimensions().height then $("somethind").show();". What I want is to somehow calculate that mouse right now is on bottom of the screen (+- 50px) (not the content).
I think I have confused even myself :) hope someone will understand what I wrote.

I think you have to use document.viewport.getScrollOffsets() and then substract the pointerY with the scroll offset to get the position in the viewport.