We Keep Coding

jQUery know when we reach end of div

I want to load ajax data when I reach the end of a particular div.
I use now :
$(window).scroll(function() {
if (! loadingAjax) {
if ($(window).scrollTop() > ($element.offset().top + $element.outerHeight() - 500)) {
from++;
loadingAjax = true;
loadMyData(from);
}
}
});
It seems a little random when I show console for example, or on smartphone.
What is the best way to detect user is reaching end of a div ($element here) ? With an offset of 50px for example before the end ?

Please have a look at the solution and you will be console logged in the last div.
$(window).bind('scroll', function() {
if($(window).scrollTop() >= $('.posts').offset().top +
$('.posts').outerHeight() - window.innerHeight) {
console.log('End Div');
}
});

Removing and adding class via .js

I'm working on a header banner that is hidden at the start but appears when the user scrolls down on the page. When the user scrolls back up to the top of the page it should disappear again and keep doing it until the user exits (there is an exit button on the banner which adds a cookie so if the user exits it won't show again).
The issue I'm having is that either the banner won't show up again when I scroll back up to the top of the page, or it will just keep showing up even after exiting. I've tried several options but nothing has worked so far.
function desktopHeader() {
$(window).on('scroll', function() {
console.log( $(this).scrollTop() );
});
var $headerBanner = $('.module-header-banner');
$('.close-btn').on("click", function () {
$.cookie("headerbanner", "exit", {expires: 2/24});
$('.module-header-banner').addClass("exit").fadeOut();
});
if($.cookie('headerbanner') == null) {
if($(window).scrollTop() > $('.site-header').height()){
$headerBanner.addClass('active').fadeIn();
}
$(window).scroll(function() {
if($(window).scrollTop() > $('.site-header').height()){
$headerBanner.addClass('active');
} else if($(window).scrollTop() < $('.site-header').height()) {
$headerBanner.removeClass('active');
}
});
}
}
At a loss -- if anyone has any advice would be best appreciated. Thanks!

Try to add your scroll event outside of the click function,
here is a updated code
function desktopHeader() {
$(window).on('scroll', function() {
console.log( $(this).scrollTop() );
});
var $headerBanner = $('.module-header-banner');
$('.close-btn').on("click", function () {
$.cookie("headerbanner", "exit", {expires: 2/24});
$('.module-header-banner').addClass("exit").fadeOut();
});
if($.cookie('headerbanner') == null) {
if($(window).scrollTop() > $('.site-header').height()){
$headerBanner.addClass('active').fadeIn();
}
}
$(window).scroll(function() {
if($(window).scrollTop() > $('.site-header').height()){
$headerBanner.addClass('active');
}
else if($(window).scrollTop() < $('.site-header').height()) {
$headerBanner.removeClass('active');
}
});
}

Unexpected behaviour jquery

I am trying to write a code which fires on element coming into view and also when the element goes out of view
var _2017 = $("#2017").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() - _2017 > -200) {
jQuery('[id*="_2017"]').each(function(index) {
$(this).delay(200 * index).fadeIn(200);
});
} else {
jQuery('[id*="_2017"]').each(function(index) {
$(this).delay(200 * index).fadeOut(200);
});
}
});
The problem is that jQuery does not target all divs with the id. This code works fine
var _2017 = $("#2017").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() - _2017 > -200) {
jQuery('[id*="_2017"]').each(function(index) {
$(this).delay(200 * index).fadeIn(200);
});
} else {
}
});
But when I include the code when the element goes out of view. It does not target all divs.
If anyone can help and explain to me what I am doing wrong. Thanks

$(window).width() if statement running when it shouldn't

Hey guys I am having an issue with $(window).width if statements in jQuery. For some reason my function is running even when the window width is smaller than 991 pixels however my if statement states that it should run if the window width is greater than 991.
function ctaFixTop() {
var mn = $("#new-car-offer-cta");
var offerHead = $('#new-car-offer-head');
mns = "new-car-offer-cta-active";
var hdr = 0;
var ctaHeight = $("#new-car-offer-cta").height();
$('.header-wrapper, #top-bar, #new-car-back, #new-car-offer-head').each(function() {
hdr += $(this).outerHeight();
});
if ($(window).width() > 991) {
$(window).scroll(function() {
if ($(this).scrollTop() > hdr) {
offerHead.css('margin-bottom', ctaHeight);
mn.addClass(mns);
} else {
offerHead.css('margin-bottom', 0);
mn.removeClass(mns);
}
});
}
}
$(window).resize(ctaFixTop);
ctaFixTop();
As you can see the ctaFixTop function is being called twice, once on initial load and whenever the window is resized. When I initially load the page with a window width below 991px the function works how it should however if I then increase the windows size past 911px and size it back down under 911px the $(window).scroll function will be called even when it's wrapped in the if statement that states that it should only run if the window width is greater than 991.
Any idea why this might be happening as I have tried trouble shooting this and simply can't understand why the function is being called even with the if statement around it.
Thanks

That is because the scroll event is already attached to the window and you are not removing it. What you need to do is put the
if ($(window).width() > 991) {
inside the .scroll() method like this.
$(window).scroll(function() {
if ($(window).width() > 991) {
if ($(this).scrollTop() > hdr) {
offerHead.css('margin-bottom', ctaHeight);
mn.addClass(mns);
} else {
offerHead.css('margin-bottom', 0);
mn.removeClass(mns);
}
}});

Only show div when in the middle of the page

I'm hoping to fade in a div when the page has been scrolled away from the top of the page, however I want this div to be hidden again when approaching the bottom of the page.
To be specific, I want the div to be hidden when within 200px of the top or 200px of the bottom.
I have two scripts which work independently, but when both active, a conflict between the two causes the div to flash in and out of view.
How would I combine the following scripts to avoid this conflict? Any help would be most appreciated. Thanks!
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 200) {
$('#myDiv').fadeIn(500);
} else {
$('#myDiv').fadeOut(500);
}
});
});
and
$(function () {
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
$('#myDiv').fadeIn(500);
} else {
$('#myDiv').fadeOut(500);
}
});
});

how's this:
$(function () {
var $window = $(window);
$window.scroll(function () {
var scrollTop = $(this).scrollTop();
// only fadeIn between 200 from top and 200 from bottom
if (scrollTop > 200 && scrollTop < $(document).height() - $window.height() - 200) {
$('#myDiv').fadeIn(500);
} else {
$('#myDiv').fadeOut(500);
}
});
});
Example fiddle