Infinite scroll detecting bottom of page only if there is nothing underneath - javascript

I'm doing an infinite scroll page with angularjs that loads more items when the user reaches the bottom of the page. My problem is that under the infinite scroll container may or may not have more "stuff". So i don't want to load more items if the user reaches the bottom of the page if that "stuff" is present. So i want to load more items when the infinite scroll container reaches the end of that container and not the end of the page.
For the infinite scroll i have an angularjs directive like this:
myApp.directive("scroll", function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function(event) {
var docHeight = $(document).height();
var reachBottom = $($window).scrollTop() == (docHeight - $($window).height());
if (reachBottom) {
setTimeout(scope.loadMore(), 100);
}
});
};
});

you can get stuff height under infiniti scroll container and use it
var docHeight = $(document).height();
var stuffHeight = $('#stuff').height();
var reachBottom = $($window).scrollTop() == (docHeight - ($($window).height() + stuffHeight));
if (reachBottom) {
setTimeout(scope.loadMore(), 100);
}

Only using jQuery you can do it. See this code snippet below.
<script>
$(function () {
var w = $(window);
loadNewPage();
// Each time the user scrolls
w.scroll(function () {
// End of the document reached?
if ($(document).height() - win.height() == win.scrollTop()){
loadNewPage();
}
});
});
</script>

Related

Add a class when div is x amount pixels of top of viewport

I would like to have is to add a class to a div when it is, for example, 100 pixels of the top of the viewport. So not after scrolling 100px but when it is 100px below the top of the viewport. Can anybody help me with this?
<script>
jQuery(function() {
//caches a jQuery object containing the header element
var header = jQuery('#v0');
jQuery(window).scroll(function() {
var scroll = jQuery(window).scrollTop();
if (scroll >= 2939) {
header.addClass('fixed1');
}
else {
header.removeClass('fixed1');
}
});
});
</script>
Not sure if this is exactly you want to achieve, but here's the code. If the header is more than 100px away from the top (which is not very usual because then there should be something on top of the header) of the window, then the new class is added to the header.
$(function() {
var $header = $('#v0');
$(window).scroll(function () {
if ($header.offset().top - $(this).scrollTop() > 100) {
$header.addClass('blabla');
} else {
$header.removeClass('blabla');
}
});
});
UPDATE:
Depending on your feedback, this is the first solution that came up to my mind. I think that's the behavior you need. Hope that works for you:
$(function() {
var $header = $('header');
var $video = $('#v0');
var $videoContainer = $('.videoContainer');
$(window).scroll(function () {
// Here we check if video field touches the header, and add 'fixed' class
if ((($header.offset().top + $header.height()) - $video.offset().top) >= 0) {
$video.addClass('fixed')
}
// Since both video and header is fixed now I needed some other
// element to check if we are again getting away from the header
// (scrolling up again) That's why I added the $videoContainer element
// to be able to remove the 'fixed' class.
if ($videoContainer.offset().top > ($header.offset().top + $header.height())) {
$video.removeClass('fixed');
}
});
});
Updated code:
https://jsbin.com/foyoyus/6/edit?html,css,js,output

Sticky navigation bar doesn't work properly

I'm using this code to make the navigation bar stick to the top of the page after scrolling:
var nav=$('body');
var scrolled=false;
$(window).scroll(function(){
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000);
scrolled=true;
}
if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function(){nav.removeClass('stuck');$('.navigation-class').removeAttr('style');});
scrolled=false;
}
});
The problem is, if the user scrolls the page up and down quickly, and the navigation is STILL animating, it will continue the animation and then suddenly jump into it's designed position, which gives a hiccup effect to the menu.
Try to scroll this page quickly to see it in live.
Is it possible to make it run smoothly like other websites?
Thanks are in order.
Edit:
After rereading the question, I realized the problem is probably that you're not cancelling the animation when the user scrolls back above 175px.
Presumably you're applying position: float to your nav element? Are you removing float as soon as the user scrolls up?
Try setting the queue option to false (see https://api.jquery.com/animate/), so the animation doesn't wait for the other one to complete.
Maybe you could try getting rid of the JQuery animation and replacing it with CSS transitions?
Maybe something like this?
var nav=$('body');
var scrolled=false;
var scrollToggle = function(){
$(window).off('scroll');
if(175<$(window).scrollTop()&&!scrolled){
nav.addClass('stuck');
$('.navigation-class').animate({marginTop:80},1000, function() {
$(window).on('scroll', scrollToggle);
);
scrolled=true;
}
else if(175>$(window).scrollTop()&&scrolled){
$('.navigation-class').animate({marginTop:0},0,function({
nav.removeClass('stuck');
$('.navigation-class').removeAttr('style');
$(window).on('scroll', scrollToggle);
});
scrolled=false;
}
};
$(window).on('scroll', scrollToggle);
I have something similar in a WIP myself. I'll post it here only slightly edited, maybe it can be useful to you.
var headerFloat = function() {
//Header
var pageHeader = $('#pageHeader'), pos = '',
headerMain = $('#headerMain'), headerMainHeight = '',
content = $('#content'), contentPadding = '',
pageTitle = $('h1.currentPage'), pageTitleTop = '';
if($(window).scrollTop() >= 95) {
pos = "fixed";
headerMainHeight = '75px';
contentPadding = '225px';
pageTitleTop = '55px';
contentHeaderTop = '130px';
}
//Header
pageHeader.css('position', pos);
headerMain.css('height', headerMainHeight);
content.css('padding-top', contentPadding);
pageTitle.css({ 'transition': 'all 0s', 'position': pos, 'top': pageTitleTop });
pageTitle[0].offsetHeight; //force "reflow" of element -- stackoverflow.com/questions/11131875/#16575811
pageTitle.css('transition', '');
};
$(document).ready(function() {
/* *** SCROLL -> FLOAT HEADER *** */
$(window).on("scroll.float", headerFloat);
});
Inputting '' (empty string) in the JQuery css function resets it to the original value. You should do that instead of .removeAttr('style');
I would also avoid the scrolled boolean. I think you need it anyway, if scrollTop < 175, you'll never be scrolled, and vice versa.

I want my back to top icon appear only after i scroll the page

I had made back to top icon which works as it should be but the problem is it appears when i open the page but i want back to top to be appeared only after i scroll page.Thank you for your help.
Try this:
(function() {
$(window).scroll(function() {
toggleBackToTop();
});
// Show and hide back to top button
function toggleBackToTop() {
var offset = 1, // Offset position when to show
scrollTop = 0,
$btn = $('.back-to-top');
scrollTop = $(window).scrollTop();
if(scrollTop >= offset) {
$btn.fadeIn();
} else {
$btn.fadeOut();
}
}
})();
Note: Update, your button selector
For Referance:
Output: http://output.jsbin.com/nojese
Code: http://jsbin.com/nojese/edit?html,css,js

A jQuery scrollTop(); with Transition

I can't figure out of to make scroll, (when a div is clicked), and make it smooth. (like not going straight to the scroll position)
Here's my code:
$('.about-center').click(function() {
var div = document.getElementById('ABOUT');
var pos = div.offsetTop;
$(window).scrollTop(pos);
});
try this one:
$('.about-center').click(function() {
var div = $('#ABOUT');
var pos = div.offset().top;
$('html, body').animate({scrollTop:pos},2000); // will take two seconds to scroll to the element
});

How can I load enough images to put a scroll bar on a users page to enable infinite scroll behaviour?

I am trying to implement an "infinite-scroll" behaviour to load some photos on a page and I'm using the following JavaScript to do so:
$(document).ready(function(){
$(window).scroll(function(){
var wintop = $(window).scrollTop(), docheight = $(document).height(), winheight = $(window).height();
var scrolltrigger = 0.10;
if ((wintop/(docheight-winheight)) > scrolltrigger) {
console.log('scroll bottom');
lastAddedLiveFunc();
}
});
});
By default I would like to fill up the users page with just enough photos to throw in a scroll bar - otherwise the above JavaScript would never fire (if only 3 images are loaded say). The photos are loaded with an ajax call at the end of
lastAddedLiveFunc()
Any idea how I could achieve this?
He is a jsFiddle I made that does what I think you are looking for: http://jsfiddle.net/pseudosavant/FENQ5/
Basically any time the position of the bottom of the window gets within X pixels of the bottom of the document I add some content.
Javascript:
$(document).ready(function(){
$(window).scroll(function(){
var docBottom = $(document).height();
var winBottom = $(window).height() + $(window).scrollTop();
var scrollTrigger = $(window).height() * 0.25;
if ((docBottom - scrollTrigger) < winBottom) {
$("#container").append("<div class='box red'></div>");
console.log("added more");
}
});
});

Categories