Sticky navigation with horizontal layout

Question

I've been searching around and have yet to find a solution to this. I have a horizontal page set up with a fixed navigation. However, I want the navigation to have a sticky effect exactly like this, but instead of sticking when scrolling from the top (which the site I'm working on doesn't scroll up and down at all), I'd like it to stick after a percentage scroll from the left. Does anyone know of some sort of solution or work-around with an existing jquery plugin?

Here's the site: If you scroll to the left from where it loads, there's a little news section, but I want the navigation to stay in an absolute position on the landing portion until you scroll right from there so as not to interfere with the news text.

Answer 1

See this fiddle:

$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(window).height()+101) {
    $('#hello').css({'position':'fixed','top':'0px'});
}
else{
    $('#hello').css({'position':'relative'});
}
});

I have included $(window).height() in if(condition) inorder to give same output when the browser window height changes.