We Keep Coding

jQuery - How to use smart way to load content on scroll top

I am using this way to load old content from messages when user scrolls top.
$("#Default3").scroll(function() {
if($("#Default3").scrollTop()<1) {
// load 10 more old data to div
});
});
However, if you scroll to top, it just loads for one time. You need to scroll a little bottom and then scroll top to load 10 more again. So I checked the facebook messaging, and noticed that they load more old content if the scroll is upper than 50% of the height. What is the correct way for doing that ?

You can scroll down one pixel, so the user would be able to scroll up again:
$("#Default3").scroll(function() {
if ($("#Default3").scrollTop() < 1) {
// load 10 more old data to div
$("#Default3").scrollTop(1);
}
});

Disable page scroll until page loads - JQuery

I have built a parallax scrolling intro for a clients website - the site contains many high res images - so I have created a quick loader which blanks out the screen with a full screen high z-index div and then uses the setTimeout method to fade in the page 4 seconds after document ready (not sure if this is the best way to do this but it works in every test I've tried).
I would like to disable the scroll to prevent users scrolling through the animation before it appears -can anyone recommend a good cross-browser method to do this?

If you want to fade in when all images are loaded, you can try this
var images = $('img');
var images_nbr = images.length;
images.load(function() {
images_nbr--;
if (images_nbr == 0) {
$('body').css('overflow','auto');
$('...').fadeIn();
}
});

Set
#mydiv {
overflow:hidden
}
in your parent div in CSS. Then, in your document, add this...
$('#mydiv').css('overflow', 'auto');
...in the function that fades in your content.
Thus, on load the page will be unscrollable, but when you fade in, the overflow property will be overwritten and allow the content to scroll.

.scrolldiv{
overflow:hidden;
}
$(window).load(function(){
$(".scrolldiv").css("overflow","auto");
});

You can try like,
initially add the below css on body
body {overflow:hidden;}
and after your setInterval function complete execution (whatever your loading function) just remove the style from body, like
$('body').css('overflow','auto');

Holding the div at the fixed x or y positon on scrolling - just testing

I am creating a timeline interface using jQuery and CSS. I am using jScrollPane for scrolling it.
I have
parent div which wraps all the div and on which jScrollPane is applied
header div should be fixed while scrolling vertically, but scroll when scrolled horizontally and
leftpane div should be fixed while scrolling horizontally, but scroll when scrolled vertically
Sample Image
JSFiddle Link : http://jsfiddle.net/gACZ8/4/
Any ideas?

You can use jscrollpane events.
Demo: http://jsfiddle.net/gACZ8/10/
$(document).ready(function() {
$('#parent')
.bind('jsp-scroll-y',
function(event, scrollPositionY, isAtTop, isAtBottom) {
$(".header").css("top", scrollPositionY);
}
)
.bind('jsp-scroll-x',
function(event, scrollPositionX, isAtLeft, isAtRight) {
$(".lefter").css("left", scrollPositionX);
}
)
.jScrollPane();
});
Also you should add position:relative to both divs (to move them with top/left without moving other blocks) and z-index to header (to make it overflow sidebar).

http://jsfiddle.net/gACZ8/11/
You need to look at the scroll positions of .jspPane which is the div jsScroll creates, and offset the positions of your divs.
$(document).ready(function() {
$('#parent').jScrollPane();
$('#parent').on('scroll', function(){
var jspPane=$(this).find('.jspPane');
$('.lefter').css('left', 0-parseFloat(jspPane.css('left')));
$('.header').css('top', 0-parseFloat(jspPane.css('top')));
});
});
NB your header and leftcol need to be positioned absolutely otherwise they'll push the page contents with them, which means your page has to have margins that avoid these divs, and you need to take care of your z-indexes.
EDIT
Or use jscrollpane events (see other answer). I have never used jscrollpane before!

How to make div appear from the top when scrolling down?

I would like a div to appear and slide down once you scroll pass the header.
Here's what it should look like:
http://www.space.com/11425-photos-supernovas-star-explosions.html
Here's what I got so far but it's not working.
http://jsfiddle.net/nHnrd/

You'll need to find out the height of the header and its position on the page then just show or hide the div depending on the scrollTop value using jquery.
For example:
// Get the headers position from the top of the page, plus its own height
var startY = $('header').position().top + $('header').outerHeight();
$(window).scroll(function(){
checkY();
});
function checkY(){
if( $(window).scrollTop() > startY ){
$('.fixedDiv').slideDown();
}else{
$('.fixedDiv').slideUp();
}
}
// Do this on load just in case the user starts half way down the page
checkY();
Then you'll just need to set the .fixedDiv to position:fixed: top: 0; left: 0;
Edit: I've added a checkY() function that you can call whenever the page loads as well as on scroll. To hide it initially though, just use CSS.

You might want to just show and hide your div rather than pseudo class AND hide and show
initially:
$("#mydiv").hide();
then (on scroll):
$("#mydiv").show();
set what you want your div to look like i.e. 0,0 and fixed
Use the Keep It Simple method!

I've updated your jsfiddle with something you can try.
Try this:
http://jsfiddle.net/nHnrd/10/
Also, this article was helpful:
http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/

Trigger JQuery function when passed half way down the page

Is there a way to tell if you have scrolled passed the center of the web page or in other words, when you have scrolled passed exactly half of the web page and your scrollbar is situated in the lower half of the browser window?
I want to be able to trigger this:
$('.pineapple-man').show(); when I have scrolled down passed half of the page?
Is this possible at all?
Your help would be so kind!

You can get the pixel amount of an element has been scrolled by using .scrollTop(). To listen to scroll events use .scroll().
When you want to identify the halfway, use height of the scroll:
$(window).scroll(function () {
if ($(window).scrollTop() > $('body').height() / 2) {
$('.pineapple-man').show();
}
});
If you are scrolling some other element than the whole window/body, please feel free to change the selectors.
To make the showing one-timer, add the removal of scroll event listener, by adding the following after the .show() call:
$(window).unbind('scroll');

I guess you want to do something like this:
if($(document).scrollTop() > $(document).height()/2){
$('.pineapple-man').show();
}
where scrollTop() gets the current horizontal position and height() defines the document height.

See the scroll event and the scrollTop method.

you can use the focus event if you scroll down to it (just like jQuery uses for their comments)
jQuery('selector').focus(function() {
jQuery('.page').show();
});