Develop Reference

scroll event not working on mobile

Setch.me loading normally on desktop but not trigerring on mobile unless if I click on photographers/makeup artists, I've added height=device-height after searching for a solution here but that didn't work.
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
track_page++;
load_contents(track_page);
}

Try this:
$(document.body).on('touchmove', onScroll); // for mobile
$(window).on('scroll', onScroll);
// callback
function onScroll(){
if( $(window).scrollTop() + window.innerHeight >= document.body.scrollHeight ) {
track_page++;
load_contents(track_page);
}
}

var addition_constant = 0;
$(document.body).on('touchmove', onScroll); // for mobile
$(window).on('scroll', onScroll);
function onScroll() {
var addition = ($(window).scrollTop() + window.innerHeight);
var scrollHeight = (document.body.scrollHeight - 1);
if (addition > scrollHeight && addition_constant < addition) {
addition_constant = addition;
loadmorecontest();
}
}

The "scrollTop" value must be rounded on mobile devices using "Math.ceil". (It's decimal based on the resolution of the screen), so:
if (el.scrollHeight <= Math.ceil(el.scrollTop) + el.offsetHeight) {
// so something...
}

In addition to previous comments, $(window).scrollTop()
seems not to work on mobile and should be replaced with document.body.scrollTop

It seems bit irrelevant but since I found myself here and my reason that it not worked is the element that I was trying to scroll has;
overflow-y: hidden
When I remove that it worked perfectly. I just wrote that for if it is also someone's case.

Hi you didn't close correctly your event, this should be like this:
$(window).scroll(function() {
if($(window).scrollTop() + $(window).height() >= $(document).height()) {
track_page++;
load_contents(track_page);
}});

Do Javascript function on certain height

If you take a look at this link and scroll down: http://templates.entheosweb.com/template_number/live_demo.asp?TemplateID=51090
You see that if you scroll down, animations are displayed. Javascript functions are triggered at a certain height and I also want to achieve that effect. But I have no idea where to start. How can I trigger a function at a certain height?

Try like this:
window.addEventListener('scroll', function() {
var hasFired = false;
if (document.body.scrollTop >= 250 && !hasFired) {
hasFired = true;
// do something when scrolling down
}
if (document.body.scrollTop < 250 && hasFired {
hasFired = false;
// do something when scrolling up, and enable the scroll-down event to fire once again
}
});
The second if() is optional.

You can simply use scroll listener and at particular hight, you can call your funtion :-
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
if (document.body.scrollTop == 250) {
myCustomFunction();
}
}
function myCustomFunction {
// define your logic here
}

There are a lot of libraries(for example) to achieve this animation, google for them.
And if you want to write your own custom logic than check the window.scroll function of JavaScript.

Animate some divs only once

I am trying to animate some divs after the user scrolls to a specific position on the page. the problem is that i want it to happen only once. I used Boolean flags but it doesn't seem to like it.
What are u all suggest me to do?
::the code Its not even running
FYI I don't want to use PHP
var once = false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 && once == false) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
once = true;
}
)};
Thanks!

From your question
after the user scrolls to a specific position on the page
Listen to scroll event
$(document).ready(function() {
var once = false;
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760 && once==false){
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);
});
once=true;
}
});
)};
Alternative from comments. Check if element has a class (or attribute) or not. Below code checks if the element has the data-noanimate attribute. If yes it will not animate, if not it will animate and add data-noanimate so that it will animate once.
$(document).ready(function() {
$(document).on('scroll', function(){
if ($(window).scrollTop() > 760){
$('.hash').each(function(i) {
if($(this).attr('data-noanimate') === undefined){
$(this).attr('data-noanimate','true').fadeOut(0).delay(1000*i).fadeIn(1000);
}
});
}
});
)};

var once=false;
$(document).ready(function() {
if ($(window).scrollTop() > 760 &&once==false)
{
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000*i).fadeIn(1000);});
once=true;
}
});
Your brackets on the end of the ready function were flipped.

The other answer is correct, but it can be better like this:
$(function() {
$(window).on('scroll', function(){
if ($(window).scrollTop() > 760) {
$('.hash').each(function(i) {
$(this).fadeOut(0).delay(1000 * i).fadeIn(1000);
});
// without boolean value,you can off `scroll` event
$(window).off('scroll');
}
})
});

Jumpy scroll after scroll-animation with javascript

I have a problem with the scrolling animation. Jumpy scroll occurs when the page is scrolled after scroll-animation. I suspected the scroll-event repeats itself, but I'm not sure. Can you help me with it?
$(document).ready(function(){
var offset;
var anchor = $("#navigation").offset().top;
$(window).bind('mousewheel', function (e) {
offset = $(window).scrollTop();
if (e.originalEvent.wheelDelta < 0) {
//mouse scroll down
console.log('Down: ' + offset + " " + anchor);
if (offset >= anchor) {
// if anchor has been scrolled, user can scroll further
// the problem ocuurs in this block
return true;
} else {
// animate to anchor( nav menu)
$("body, html").animate({
scrollTop: anchor + 1
}, 200);
$("#navigation").addClass("nav-fixed");
return false;
}
} else {
//mouse scroll up
if (offset < anchor) {
$("#navigation").removeClass("nav-fixed");
return true;
}
}});
});
JSFiddle: http://jsfiddle.net/0noms3cs/
Thank you a lot!

Your issue is simple. The scroll event fires over and over again. Your line of thinking behind the cause of this issue is correct, you have a large number of animate events that get stacked up which causes this weird behavior.
You can resolve this issue by adding a boolean variable (such as scrollInitialized) that starts out as false and gets flipped to true once the scroll event has fired once.
Here's the altered JS code. Note: I only added the scrollInitialized variable and a check for it in the if statement.
Edit: I also removed the inner if-else case since it was not necessary using this design.
EDIT 2: I originally misunderstood what you wanted to do. What you need to do was add a scrollLock variable that would only be set to true for the duration of your animation. After thinking about this, I implemented it for you. Here is the Jsfiddle:
https://jsfiddle.net/04gaaapo/1/
Here is the new JS code:
$(document).ready(function () {
var scrollLock = false;
var offset;
var anchor = $("#navigation").offset().top;
$(window).bind('mousewheel', function (e) {
offset = $(window).scrollTop();
// if scroll is NOT locked and we are above the anchor
if (scrollLock === false && offset < anchor) {
if (e.originalEvent.wheelDelta < 0) {
// scrolling down
scrollLock = true;
// animate to anchor( nav menu)
$("body, html").animate({
scrollTop: anchor + 1
}, 200);
// unlock in 250ms
setTimeout(toggleLock, 250);
// add nav class
$("#navigation").addClass("nav-fixed");
} else if (e.originalEvent.wheelDelta > 0) {
// scrolling up
scrollLock = true;
// animate to top of page
$("body, html").animate({
scrollTop: 0
}, 200);
// unlock in 250ms
setTimeout(toggleLock, 250);
// remove nav class
$("#navigation").removeClass("nav-fixed");
}
}
});
function toggleLock() {
scrollLock = !scrollLock;
};
});

Trying to trigger scroll event by using jquery.mousewheel

I'm having some trouble with triggering a scroll event by using jquery.mousewheel. I want to "expand" the scroll event for #bio-content-container to trigger when scrolling over #bio-slider-container.
I'm using following code:
var lastScrollTop = 0;
$("#bio-content-container").scroll(function () {
var st = $(this).scrollTop();
if (st > lastScrollTop){
scroll('Down');
} else {
scroll('Up');
}
lastScrollTop = st;
});
jQuery(function($) {
$('#bio-slider-container')
.bind('mousewheel', function(event, delta) {
$("#bio-content-container").trigger('scroll');
return false;
});
});
I don't want to trigger scroll on #bio-slider-container, so that's why I'm using mousewheel. Any help would be much appreciated :)

If I understand correctly, you want to scroll the contents of #bio-content-container when you use the mousewheel over #bio-slider-container. You might want to check out the jquery.scrollTo plugin. This code works for me (without seeing your HTML):
$(document).ready(function () {
$('#bio-slider-container').bind('mousewheel', function (event, delta) {
var content = $("#bio-content-container");
if (delta < 0) {
content.scrollTo("+=10");
} else {
content.scrollTo("-=10");
}
});
});