how to detect when div scroll bar, scroll up and hit the top(only when it hit the top)
I have found another post, but this one is hit the bottom.
what i need is hit the top. anyone know how to change this?
$("#divID").scroll(function(){
if($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight())
{
alert(1);
}
});
Know when vertical scrollbar hits bottom of scroll in div
working fiddle
var el = $('.test');
el.on('scroll', function(){
if(el.scrollTop() == 0){alert("i just hit the top")}
});
scrollTop will be 0 when the scroll bar is that the top. Try this:
$("#divID").scroll(function () {
if ($(this).scrollTop() == 0) {
alert(1);
}
});
Example fiddle
$("#divID").scroll(function(){
if($(this)[0].scrollHeight - $(this).scrollTop() <= $(this).outerHeight())
{
alert("Bottom");
}
if($(this).scrollTop() == 0)
{
alert("Top");
}
});
Fiddle is here
Related
I want to hide my navbar when scrolls down and show when scrolls up, but scrolls down occurs after the windows has been scrolled x amount of pixels down the page.( in the code after #section1 ) and if scrolls up shows the navbar immediately.I am using this code but I don't know how could I define a position.
var scrollp=0;
(function ($) {
$(document).ready(function(){
$(function () {
$(window).scroll(function () {
// ask about the position of scroll
if ($(this).scrollTop() < scrollp) {
$('.navbar').fadeIn();
scrollp= $(this).scrollTop();
} else {
$('.navbar').fadeOut();
scrollp= $(this).scrollTop();
}
});
});
});
}(jQuery));
Just check the scrollTop in the else clause, like this:
... else {
scrollp = $(this).scrollTop();
if (scrollp > fadeOutAfter) // Set fadeOutAfter to wherever you want the navbar to fade out
$('.navbar').fadeOut();
}
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);
}});
I am having some trouble with this one. I have the following javascript...
$(window).on('scroll', function() {
scrollPosition = $(this).scrollTop();
if (scrollPosition >= 130) {
header.animate({height: '51px'}, 500);
mainNav.css("display", "none");
logo.fadeOut("fast");
scrollLogo.delay(300).slideDown("fast");
$(this).off('scroll');
}
else {
header.animate({height: '130px'}, 500);
}
});
I am trying to do a series of changes to my header when scrolled past 130 px and then return it to its original state if scrolled back up. Everything works fine if I comment out the else statement, but as soon as I start to add to it, everything breaks. I cannot figure out why. Any help is much appreciated.
My guess would be that you're repeatedly calling either the if or the else condition, whereas you just want to call them just once.
Try something like this:
var compactHeader = false;
$(window).on('scroll', function() {
scrollPosition = $(this).scrollTop();
if (scrollPosition >= 130 && !compactHeader) {
compactHeader = true;
// Code to collapse header...
} else if (scrollPosition < 130 && compactHeader) {
compactHeader = false;
// Code to expand header...
}
});
As well as checking the scroll position we check whether the header is collapsed or expanded, to ensure the animation is only performed once.
I have managed to hide the element when you scroll all the way up but i am having problems to hide it when you scroll down to bottom of the page.I have two span elements that hold images of uparrow.png and downarrow.png.I want my downarrow span to disappear when you reach the bottom of the page and else it is visible.Here is my code:
#uparrow{position:fixed;top:20px;left:50px;}
#downarrow{position:fixed;bottom:20px;left:50px}
$(document).ready(function(){
var top=0;
$(window).scroll(function(){
var st=$(this).scrollTop();
if(st==top){
$("#uparrow").css("display","none");
}else{
$("#uparrow").css("display","block");
}
});
});
ok i figured it out here is the code:
$(document).ready(function(){
var top=0;
$(window).scroll(function(){
var st=$(this).scrollTop();
if(st==top){
$("#uparrow").css("display","none");
}else{
$("#uparrow").css("display","block");
}
if($(window).scrollTop() + window.innerHeight == $(document).height()){
$("#downarrow").css("display","none");
}else{
$("#downarrow").css("display","block");
}
});
});
It's the window.innerHeight that does the work because if i put ($(window).scrollTop() == $(document).height() - $(window).height()) that makes arrows disappear when you scroll all the way up at least that's what i am getting in my browsers(firefox 32.0,chrome 37.0.2062.120)
$(document).ready(function(){
var top=0;
$(window).scroll(function(){
var st=$(this).scrollTop();
if(st==top){
$("#uparrow").css("display","none");
}else if{
$("#uparrow").css("display","block");
}
else if ($(window).scrollTop() == $(document).height() - $(window).height()){
// your piece of code e.g.
$("#downarrow").css("display","none");
}
else
{}
});
});
I following code which works fine to find when user reaches to the bottom or top of the div while scrolling. However, now I want to find once the user is reached to the bottom/top of the div tag and he/she is still scrolling. I mean once user reaches to the bottom the find out if that user is still scrolling in bottom direction and if user reaches to the top the find out if he is still scrolling in up direction. How can I achieve this?
Here is the CODE
$('.scroll').on('scroll',checkScroll);
function checkScroll(e)
{
var elem = $(e.currentTarget);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())
{
console.log("bottom");
}
if (scrollBottom(elem) == elem.outerHeight())
{
console.log("top");
}
}
function scrollBottom(el)
{
return $( el ).scrollTop() + $( el ).height();
}
try this i have test only in chrome browser:-
$('.scroll').bind('mousewheel DOMMouseScroll', function(event){
var elem= $(this);
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight())
{
console.log("opps.. still scrolling");
}
});
Demo