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');
}
});
}

Combine jQuery scroll and load

I'm using the following code to detect if the page is scrolled beyond 150px.
The code works fine but I'd like to know if theres any way to combine the scroll and load functions as currently I'm repeating code.
Appreciate any help.
var nav = $(".header");
$(window).scroll(function () {
if ($(this).scrollTop() > 150) {
nav.addClass("header-bg");
} else {
nav.removeClass("header-bg");
}
});
$(window).load(function () {
if ($(this).scrollTop() > 150) {
nav.addClass("header-bg");
} else {
nav.removeClass("header-bg");
}
});

Nevermind I figured it out, for anyone else who gets stuck with:
var nav = $(".header");
$(window).on("load resize scroll",function(e){
if ($(this).scrollTop() > 150) {
nav.addClass("header-bg");
} else {
nav.removeClass("header-bg");
}
});

offset().top not working in Safari

Having problem offset().top not working in Safari. Works fine on all other browsers but seems to break in Safari. Any suggestions?
$(window).scroll(function(){
collapseNav();
});
function collapseNav() {
if ($(".navbar").offset().top > 50 ) {
// code here
} else {
// code here
}
}

You can fix this issue like this
// as of 1.4.2 the mobile safari reports wrong values on offset()
// http://dev.jquery.com/ticket/6446
// remove once it's fixed
if (/webkit.*mobile/i.test(navigator.userAgent)) {
(function($) {
$.fn.offsetOld = $.fn.offset;
$.fn.offset = function() {
var result = this.offsetOld();
result.top -= window.scrollY;
result.left -= window.scrollX;
return result;
};
})(jQuery);
}

Found a work around using $(window).scrollTop(). So it looks like this:
$(window).scroll(function(){
collapseNav();
});
function collapseNav() {
if ($(window).scrollTop() > 50 ) {
// code here
} else {
// code here
}
}

Load on bottom of div is not working properly

So this question is not necessarily how to get it to work, because it does. But it is very very buggy. The problem I'm having is that when you scroll down, it sometimes takes a while to load so that the function reactivates or something. Either way the variable is reset and it loads like 5 pages in a row. So it's buggy. I have the code here:
var ldid = 10;
jQuery(
function ($) {
$('#allpostcontainer').bind('scroll', function () {
if ($(this).scrollTop() +
$(this).innerHeight() >= $(this)[0].scrollHeight) {
$("#allpostcontainer").append($("<div>").load("/streampage.php?id=" + ldid, function () {
ldid = ldid + 10;
}));
}
})
}
);

You can use a flag.
If it is loading you can set it to true.
If loading finished you set it back to false
and you make ajax request only if it is false.
var ldid = 10,
isPageLoading = false;
jQuery(
function ($) {
$('#allpostcontainer').bind('scroll', function () {
if ($(this).scrollTop() +
$(this).innerHeight() >= $(this)[0].scrollHeight && !isPageLoading) {
isPageLoading = true;
$("#allpostcontainer").append($("<div>").load("/streampage.php?id=" + ldid, function () {
ldid = ldid + 10;
isPageLoading = false;
}));
}
})
}
);

If you want to set your Div tag at the end of the "allpostcontainer" div then put below script in your page.
(#bottom is Div tag id which you need to display at the bottom. #allpostcontainer is div tag id which is main Div with scroll)
<script>
$(document).ready(function () {
$('#bottom').css('position', 'absolute');
$('#bottom').css('top', $('#allpostcontainer').height() - $('#bottom').height());
});
</script>
Please let me know if you have any query.
Thank you...