Develop Reference

show div based on another divs scroll position

I am trying to create an effect similar to "Show div on scrollDown after 800px" answered by apaul34208 in this thread.
The problem is that I am also using this parallax effect on my website, which disables the normal window scroll, so the entire website is scrolling inside a certain div (.parallax) with 100% height. This also disables the desired effect.
Since the div I want to hide or show is supposed to be in fixed position it has to be located outside the scrolling .parallax div, but read the scroll position of the same div.
I have also tried solution from this thread, but I can't seem to make it work.
Right now I am using this script:
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.bottomMenu').fadeIn();
} else {
$('.bottomMenu').fadeOut();
}
});
which is working fine on non-parallax pages except for that the fixed div is displayed when page loads on top, disappears when scrolling down 1 px only to appear again after scrolling down 800 px.
But I guess I can't use scrollTop in what I am trying to achieve.
Any suggestions?

Have you tried:
.bottomMenu {
display: none;
}
If not, it will be shown when the page is loaded (the scroll function is not fired because you haven't scrolled yet) and hidden if you start scrolling because the if statement is evaluated as false because the y position is <800 and $('.bottomMenu').fadeOut(); runs.

Fixed side menu inside wrapper

So I have a site that is contained in a wrapper that has a max width. This site also has a fixed side menu that is toggled with a button.
My issue is having the fixed side menu to stay inside the page wrapper as fixed elements are relative to the window not the parent element.
Here is an example using position: fixed: https://jsfiddle.net/okavp4p1/
As you can see the menu is coming out from the side of the viewport, not the wrapper (grey area).
I have found away around this using position: absolute: https://jsfiddle.net/5q3hn1fq/
Here you can see the menu is coming out of the wrapper. (correct)
But I had to write some extra jQuery to spoof fixed positioning on scroll.
// Fix menu
$(window).on('load scroll resize', function() {
navigation.find('ul').css('top', $(window).scrollTop());
});
But doing it this way causes glitches/lag on most web browsers. Though the example isn't to bad when scrolling but when implementing this on an actual site with tons more elements/code it becomes very obvious.
Here is what it looks like in use when scrolling down the page:
I have thought of disabling scrolling when the menu is open but I was just wondering if anyone can help?

there is a work-around for this. you need to create a bar at the top with position:fixed. This bar should have height: 1px and no background-color so you can't see it.
then you can add your navigation inside of there, and float:right. when you float right, it will show up, but will be pinned to the invisible fixed bar at the top. also, you have to give the nav a width of 0 so its invisible. then you can transition its width to 100px or whatever you want on button click.
finally, use jQuery to set its height to the height of the window on resizing of the window, and when you show it.
here's the fiddle: https://jsfiddle.net/ahmadabdul3/pptggn6v/1/
since the bar is inside a position:relative bar, it shouldn't jump around as much (or at all)
do NOT add right or left padding to the navigation though, this will break the effect. instead, you can put a container around the nav, and make the nav width: 90% or something so it appears to have some padding.
here's an updated fiddle with how the padding should be: https://jsfiddle.net/ahmadabdul3/pptggn6v/2/

If performance accross all browsers is the issue, you could re-write your function using plain .js instead of jquery.
I couldn't replicate the jittery movement in chrome, but the below should be put less strain on the browser.
$(window).on('load scroll resize', function() {
document.getElementById('nav-list').style.top = window.scrollY + 'px';
});
https://jsfiddle.net/hb4zsL6g/

jQuery powered fixed positioned div - on page scroll disappears in Firefox, works fine in Chrome, IE, Safari

Here I have a div on the bottom of right sidebar that supposed to act in this way:
When you scroll down the page and div reaches the top of the browser screen, it's class changes and it will get fixed on top of the screen untill you reach to the bottom of div's parent element.
Once the bottom of div reaches the bottom of parent element, its class changes back to non-fixed position.
Now to the problem:
For some reason in Firefox once div reaches the top of parent element it disappears, while in Chrome, IE and Safari it stays visible.
How can I prevent div from disappearing in Firefox?
You can find all the necessary code here: http://bit.ly/S9eJ87 .

This is happening because of a known issue with Firefox (and I think some versions of IE) not correctly setting the height of a nested table which has the height set to 100%.
On Chrome, $('#col12').height() is 1102. On Firefox, it is 0.
So as a workaround, you can change this line:
else if ($(this).scrollTop() + $el.height()
< $el.parent().offset().top + $el.parent().height())
to:
else if ($(window).scrollTop() + $el.height()
< $el.parent().offset().top + ($('.content2').height() - $('#fullsize td:first').height()))
If you give some better ids to the elements, you can replace the td:first selector.
Basically what is happening is this:
Your main content has a left column with one row, and a right column with 2 rows.
The bottom row of the right column should be max height, but it's not.
So to figure out what that height should have been, take the height of the left column, and subtract the height of the top row of the right column.
Let me know if that's not clear and I'll try and update my answer.
mkm

Issues with Fixed div on bottom of page that stops at given place

We needed a footer toolbar that stays at the bottom of the page, and sticks to some area when page is scrolled below that area.
We did achieved this using following script:
fixed div on bottom of page that stops in given place
But there is an issue on some page where the footer toolbar just disappears from the page, and then appear again when page is scrolled down further.
We found that this particular issue appears only on few page, when the page has some contents like Images, Video, or Ajax load other content where the content is filled in (or space is being filled) after page has loaded.
I have no clue how to fix this.
Here is the link from live site with problem page.
http://www.sandiegopchelp.com/services/cellphone-repair/htc/
http://www.sandiegopchelp.com/top-10-tips-to-help-secure-your-computer/
http://www.sandiegopchelp.com/notes-on-the-phablet-does-the-world-need-one/
It is usually more visible on blog posts with many comments. May be due to Disqus comments being loaded after the page has loaded completely.

How does this look?
http://jsfiddle.net/LukeGT/NxSc3/
$(window).scroll(function() {
$('#bar').css('position', 'static');
console.log($('#bar').position().top);
console.log($(window).scrollTop() + $(window).height());
if ($(window).scrollTop() + $(window).height() < $('#bar').position().top + $('#bar').height()) {
$('#bar').css('position', 'fixed');
}
});
setTimeout(function() {
$('#extra').show();
}, 1000);​
I simulated the late loading of images by just showing a few extra divs after 1 second. I believe the problem arises from the fact that the height of the page changes after the code for the bar runs, so it's behaving as it should if the page were shorter (without the images/ajax etc).
What I do instead is position the bar in it's place at the bottom of the page each time the page is scrolled, calculate its height from the top there, and compare this with the scroll height. If we're too far up, it positions the bar in a fixed position at the base of the page, and otherwise leaves it alone. It works smoothly in Chrome, but I haven't tested elsewhere.

I guess this is a problem with the $(window).height() function. Check here. For all the dynamic contents like Images, Video or Ajax-loaded content the height is not added to the result of $(window).height() unless it is specified somewhere in the HTML or CSS (and from the referred link I see this happens only in Chrome. You might want to confirm on this though). To those dynamic contents you can either try adding the height attribute in html or height attribute in the corresponding style.

This is not the answer but i have found something while inspecting your website...
This is you actual HTML when its working fine as you want..
<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: fixed; ">
but when it is not working, the Position attribute is changing from Fixed to Relative .
<div class="footer-toolbar-container" id="sticky_for_a_while" style="position: relative; ">
you can check you script for that or post you script here...

At initial state, your div is in position: relative so its offset is based on the container element, not on the total height of the page. The variable stickyOffset is set based on that relative offset, that is why it gets clip down sooner than expected while scrolling and also why it works in your JSFiddle as the container there is the page (Iframe) itself.
In your $(document).ready function, you'll need to add the offset of not only the footer but also the rest of the offset on top of the containing element so that the offset is based on the total page instead of the containing div.
Hope that helps.

By looking at your example on http://www.sandiegopchelp.com/services/cellphone-repair/htc/ using chrome, I can see that your footer disappears when it gets at the "related links" section. At this moment, you set the position of the footer to "relative" so it will replace it in the regular flow of the document and its position is actually below the "related links" section which is why it disappears off screen (below "related links").
but you calculated the position at which it should become relative on page load only where you should have recalculated it after having added the "related links" section as it changes the page height (I understood that you added afterward, am I right?).

Try adding a zero height div just above the position of the sticky div, which will remain at that position as the page resizes, then check that position as you scroll to determine the position where the sticky div should stop.

Finally got it fixed by two techniques, setting explicit height wherever possible using CSS and delaying jQuery function after all images are loaded. Refer this: Delay some jQuery function until all images are loaded completely

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.