I'm currently using a something like this to do stuff on ready and on the scroll event. But I really only need to do stuff each time the page scrolls a full length (window height) and not refire it for every little bitsy scroll. Is there a way to do that using jQuery or native JavaScript?
$(document).ready(function() {
$(window).scroll(function() {
// do stuff
}).scroll(); // Trigger scroll handlers.
});
You can't really fire an event without listening for it, but you can use jQuery's scrollTop() to see if the page is scrolled the same amount as the window height, but it will have to be checked on a certain event, like the scroll event, something like this:
$(window).on('scroll', function() {
if ($(this).scrollTop() > $(window).height()) {
alert("scrolled more than window height");
}
});
There isn't any way to only trigger the scroll at certain points on the page, you'll need to check it everytime... but you might want to consider throttling or debouncing the event.
Related
What is the best-performance way to get window.scroll position when user scrolls the page?
Maybe when the event fires there is some variable witch natively store something like $(window).scrollTop() value and there is no need to call $(window).scrollTop() manually to figure it out?
You can access the scroll via the $(this) keyword.
So you'd do something like this:
$(window).on('scroll', function() {
var scroll = $(this)[0].scrollY
});
That's your alternative. I didn't do any tests to see whether it's better performance wise, but it's an option if you do not want to call the $(window).scrollTop()
I have a jQuery snippet which toggles the class tinyHead on the header when the user scrolls the page.
jQuery(document).ready(function($) {
$(window).on('scroll touchmove', function () {
$('#header').toggleClass('tinyHead', $(document).scrollTop() > 0);
});
});
This works with no problems, however, if a user refreshes the page after they have scrolled down then when the page reloads the tinyHead class is not on the header. If they then scroll the class toggles on.
What I need is for the script to check if the page is at the top of the viewport and if it isn't then to add the class tinyHead
Thank you
That's normal, your callback function is never executed if the user doesn't scroll or touchmove or does whatever event you attached your function to.
You have to trigger the attached callback function at least once, you can do it simply by faking a scroll event just after doing the binding:
jQuery(document).ready(function($) {
$(window).on('scroll touchmove', function () {
$('#header').toggleClass('tinyHead', $(document).scrollTop() > 0);
}).scroll(); // << Add this
});
You will have to execute the function on page load (or DOM ready), in addition to calling it during scroll or touchmove events. Instead of repeating the function twice, you can do this:
jQuery(document).ready(function($) {
var tinyHead = function() {
$('#header').toggleClass('tinyHead', $(document).scrollTop() > 0);
}
// Call tinyHead() when DOM is ready / upon page load
tinyHead();
// Call tinyHead() when scroll or touchmove events are registered
$(window).on('scroll touchmove', tinyHead);
});
p/s: On a side note, you might want to look into throttling your scroll event — some browsers "overfire" the event (i.e. calling it too frequently). Since tinyHead() is a rather lightweight function, I personally don't think throttling the scroll event will bring about massive performance improvements, but if your tinyHead() function is computationally heavy, you might want to look into this option :)
I'm trying to figure how to trigger an jquery animation when the user scrolls to the middle of the page. Is there a way to set a listener to see if the person scrolls halfway down the page it activates the jquery code?
Using jQuery, you can attach an event handler to the scroll event, which will let you listen to whenever the window is scrolled and determine whether the user has scrolled the appropriate amount.
$(window).scroll(function () {
if (($(window).scrollTop()) > ($(document).height() / 2)) {
// Run animation here
}
});
http://jsfiddle.net/ult_combo/XdqPJ/1/
Think so.. you can look at checking parts of the page using;
setInterval(name_Of_Function,1000);
runs every second, then run a check on there is;
window.pageYOffset // Gives you current horizontal window scroll position for the page.
Firebug is helpful to get more information on these functions. Remember to check in all major browsers as the implementation or values returned may be slightly different between different browsers.
Good reference page I found;
http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
Is there a way to set a listener to see if the person scrolls halfway
down the page it activates the jquery code?
You can get the amount that the user has scrolled with the following:
$("html,body").scrollTop();
so, to trigger an event halfway down the page:
if (($("html,body").scrollTop()) > ($("html,body").height() / 2))
{
// Code that will be triggered
}
You would need a timer to constantly be checking this. You can use setInterval() in Javascript to repeatedly execute a function to check this.
http://api.jquery.com/scrollTop/
is there a function which we can execute some code after default event happened?
for example, i want to get the scrollTop value after default mouse wheel happened.
can jquery or javascript do this for me?
There is a broad range of event handlers in jQuery. You can use .scroll() to respond to scroll event. Full list of events [handlers].
$(window).scroll(function() {
alert('scrolled!');
});
scroll():
A scroll event is sent whenever the element's scroll position changes,
regardless of the cause. A mouse click or drag on the scroll bar,
dragging inside the element, pressing the arrow keys, or using the
mouse's scroll wheel could cause this event.
Mousewheel handling can be a bit of a pain. You should probably try using a jQuery Mousewheel Plugin.
This one by Brandon Aaron has worked well for me in the past.
$(document).on('mousewheel DOMMouseScroll', function() {
var top = $(this).scrollTop();
console.log(top);
});
FIDDLE
I'm using Brandon Aaron's jquery.mousewheel.js to attach events like this:
$('#mydiv').mousewheel(function(event, delta, deltaX, deltaY) { alert(deltaY); });
you can download it from https://github.com/brandonaaron/jquery-mousewheel/downloads
I wrote some code and I want to capture the scroll event in my code, so when the user scrolls my div the scroll should only work in my div and the page scroll event should not be called ( fired )
How I can do this?
Edit: I find the answer: I'm now using preventDefault() and it's now working
The CSS for this is:
body.noscroll { overflow:hidden; }
body.doscroll { overflow:auto; }
Just make it default and tell your javascript to handle the scrolling instead, it should work fine.
You can do it using jQuery like this:
$('body').css({'overflow': 'hidden'});
Like this you can disable the scroll as an event-handler after listen an event.
In a function like this:
$('element').on('event', function(){
$('body').css({'overflow': 'hidden'});
});
For activate the scroll again in case you need it after.
It's like this:
$('body').css({'overflow': 'auto'});
In the same way you will be able to handle an event with that function to bring back the scroll.
Hope this Help.