We Keep Coding

Need to trigger an event as footer comes into view

I have a deep page with a deep footer
I want to use some jQuery to trigger an event when the top of the footer comes into view
I have looked and tried using
var scrollTop = jQuery (window).scrollTop();
but it just gives the position when you load, and it doesn't change as you scroll
Any ideas please

You can use my script on this answer: Pause and play video when in viewport
Fiddle: http://jsfiddle.net/pwhjk232/
$(document).ready(function() {
var inner = $(".inner");
var elementPosTop = inner.position().top;
var viewportHeight = $(window).height();
$(window).on('scroll', function() {
var scrollPos = $(window).scrollTop();
var elementFromTop = elementPosTop - scrollPos;
if (elementFromTop > 0 && elementFromTop < elementPosTop + viewportHeight) {
inner.addClass("active");
} else {
inner.removeClass("active");
}
});
})

JQUERY- refer to specific div each time

in the fiddle you will see at the center of the page a DIV that contains text next to an img.
When I scroll down/up I need to effect with jquery/javascript only the div who's the closest to the navbar-below. all the divs as the same class so I effect them all-not what I need
For example:
what I am trying to achieve : when I scroll down,the closest div to the navbar(yellow bar) will be painted(the div) green,so if I scroll down and the navbar "collapse" with the div with will paint in green, and when he passes him and "disapper" it will go back to original color and the next div will paint in green. is it possible?
Here's the JS FIDDLE: http://jsfiddle.net/nnkekjsy/3/
When I referred to div I meant this section :
<div class="x" id="inside_center">
<div class="left_side" id="left_inside_center">sddsadasasdsadLorem </div>
<div class="right_side" id="right_inside_center"><img src="http://img-9gag-lol.9cache.com/photo/a7KwPAr_460s.jpg"></div>
</div>
JQUERY :
I added my jquery,as you can see it works only for the first one,and then stuck.. i need to "pass" it along the others div below him when the are getting to the same point. any ideas? :
$(document).ready(function() {
$(window).scroll(function() {
var scrollVal = $(this).scrollTop();
var navHeight = $("#div_menu").outerHeight();
if ( scrollVal > 55) {
$('#left_inside_center').css({'position':'fixed','top' :navHeight+'px'});
} else {
$('#left_inside_center').css({'position':'static','top':'auto'});
}
});
});

Are you looking for some thing like this?
http://jsfiddle.net/mcozkpv3/1/
This is just quick hack to find closes elements based on distance and selecting it. add data-did attribute to each item div.
$(document).ready(function () {
$(window).scroll(function () {
$('[data-did]').each(function (i, e) {
var dist = $(e).offset().top - $('#div_menu').offset().top
if (dist < 80) {
$(e).addClass('closest');
} else {
$(e).removeClass('closest');
}
});
var scrollVal = $(this).scrollTop();
var navHeight = $("#div_menu").outerHeight();
if (scrollVal > 55) {
// $('#left_inside_center').css({'position':'fixed','top' :navHeight+'px'});
} else {
$('#left_inside_center').css({
'position': 'static',
'top': 'auto'
});
}
});
});

How to reduce flicker when scrolling & using jquery offset

I've got the behavior I want: a target object that stays in the viewport when user scolls down the page (but always stays inside a parent container). The problem is it flickers a lot when scrolling with the mouse. Have a look:
http://jsfiddle.net/3ZQat/5/
Markup:
<div id='container'>
<div id='target'></div>
</div>
Javascript
(function($){
$(document).ready(function(){
// variables
var target = $('#target');
var targetRect = target[0].getBoundingClientRect();
var container = $('#container');
var contRect = container[0].getBoundingClientRect();
var viewportHeight = $(window).height();
// logic conditions
var topOffScreen = false;
var roomForTarget = false;
// scroll event
$(window).scroll(function(){
targetRect = target[0].getBoundingClientRect();
contRect = container[0].getBoundingClientRect();
winTop = $(window).scrollTop();
topOffScreen = (contRect.top < 0);
roomForTarget = (contRect.bottom > target.height());
// if container scrolls off top of viewport
if(topOffScreen && roomForTarget){
target.offset({top:winTop});
target.css('border', 'solid 3px green');
// if container fits in viewport entirely
} else if (roomForTarget) {
target.css('border', 'solid 3px green');
// more code here
// if container no longer fits in viewport
} else {
target.css('border', 'solid 3px red');
// more code here
}
});
});//end document.ready
})(jQuery);
How can I make this less jumpy?

"You can check it here.. jsfiddle.net/nqZu2/2 Might not be everything that you wanted.. but should give you some idea."
From the comments. Thanks

Detect if scrolling is possible on a page

I have a function that adds more content to the container when the viewer has scrolled close to the place where the end of the container is. It works perfectly:
var elem = $('#cont');
var bo = $('body');
$(window).scroll(function(){
if (elem.outerHeight() - bo.scrollTop() - 350 <= 0) {
for(var i = 0; i < 3; i++){
elem.append('<div class="box"></div>');
$('.box').each(function(){
$(this).fadeIn('slow');
});
};
};
});
The issue, is if there is not enough content loaded originally, then it can't load more ever!
What I need to do:
I need to detect if the body cannot scroll. So I can append content until scrolling is possible. How can I do that?
Jsfiddle

You can do this :
while($(document).height() <= $(window).height()){
$('#cont').append($('<div/>', {class : 'box', style : 'display : block'}))
}
$('.box').hide().fadeIn('slow');
Fiddle : http://jsfiddle.net/FYtZX/1/

You can use this function to detect if something is scrollable.
https://github.com/s-a/jQuery.readMore/blob/master/jquery.readmore.js#L6

Scrolling to Div IDs with Jquery

Due to css properties my scrolling to div tags has too much margin-top. So I see jquery as the best solution to get this fixed.
I'm not sure why this isn't working, I'm very new to Js and Jquery. Any help us greatly appreciated.
Here is a quick look at Js. I found that when your div ids are in containers to change the ('html, body') to ('container)
Here is my jsfiddle
jQuery(document).ready(function($){
var prevScrollTop = 0;
var $scrollDiv = jQuery('div#container');
var $currentDiv = $scrollDiv.children('div:first-child');
var $sectionid = 1;
var $numsections = 5;
$scrollDiv.scroll(function(eventObj)
{
var curScrollTop = $scrollDiv.scrollTop();
if (prevScrollTop < curScrollTop)
{
// Scrolling down:
if ($sectionid+1 > $numsections) {
console.log("End Panel Reached");
}
else {
$currentDiv = $currentDiv.next().scrollTo();
console.log("down");
console.log($currentDiv);
$sectionid=$sectionid+1;
console.log($currentDiv.attr('id'));
var divid =$currentDiv.attr('id');
jQuery('#container').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow');
}
}
else if (prevScrollTop > curScrollTop)
{
// Scrolling up:
if ($sectionid-1 == 0) {
console.log("Top Panel Reached");
}
else {
$currentDiv = $currentDiv.prev().scrollTo();
console.log("up");
console.log($currentDiv);
$sectionid=$sectionid-1;
var divid =$currentDiv.attr('id');
jQuery('html, body').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow');
}
}
prevScrollTop = curScrollTop;
});
});

I'm not entirely sure what you want but scrolling to a <div> with jQuery is simpler than your code.
For example this code replaces the automatic jumping behaviour of anchors with smoother scrolling:
$(document).ready(function(e){
$('.side-nav').on('click', 'a', function (e) {
var $this = $(this);
var top = $($this.attr('href')).offset().top;
$('html, body').stop().animate({
scrollTop: top
}, 'slow');
e.preventDefault();
});
});
You can of course adjust the top variable by adding or removing from it like:
var top = $($this.attr('href')).offset().top - 10;
I have also made a fiddle from it (on top of your HTML): http://jsfiddle.net/Qn5hG/8/
If this doesn't help you or your question is something different, please clarify it!
EDIT:
Problems with your fiddle:
jQuery is not referenced
You don't need jQuery(document).ready() if the jQuery framework is selected with "onLoad". Remove the first and last line of your JavaScript.
There is no div#container in your HTML so it's no reason to check where it is scrolled. And the scroll event will never fire on it.
Your HTML is invalid. There are a lot of unclosed elements and random tags at the end. Make sure it's valid.
It's very hard to figure out what your fiddle is supposed to do.