I would like to execute the below code when user scrolls to a certain position on the page; for instance 600px; down (from the top). So detect 600px down in PIXELS.
// $(document).ready(function() {
$(".slidedown").one('load', function () {
$(this).slideDown(200);
}).each(function() {
if(this.complete) $(this).trigger('load');
});
// });
This did not work:
$(document).scroll(function(){
if (document.scrollHeight > 600) {
$(".slidedown").one('load', function () {
$(this).slideDown(200);
}).each(function() {
if(this.complete) $(this).trigger('load');
});
}
});
simply set your threshold of # of pixels before you fire event and this function will be triggered when the user scrolls up or down by n pixels
https://jsfiddle.net/7daffjh8/7/
var scrollAmount = 0;
var pixelsToNotify = 200;
$(document).scroll(function() {
var distance = $(window).scrollTop();
console.log(distance, scrollAmount);
if(distance - scrollAmount > pixelsToNotify){
alert('user scrolled down event');
scrollAmount = distance;
}
if(distance < scrollAmount - pixelsToNotify){
alert('user scrolled up event');
scrollAmount = distance;
}
});
I think something like this will work
$(document).scroll(function(){
if ($(document).scrollTop() > 600) {
... execute code
}
});
https://jsfiddle.net/ga7140L9/1/
Related
I want to add a class to $ ('# header') when my web page scrolls down by 100px
this is the code :
$(window).scroll(function(){
var offset = $(window).offset();
if (offset.top > 100) {
$('#header').addClass('header2')
}
else {
$('#header').removeClass('header2')
};
});
#JQueryCode
Please use below mention code
$(window).scroll(function() {
var scroll = $(window).scrollTop();
//console.log(scroll);
if (scroll >= 50) {
//console.log('a');
$("#header").addClass("header2");
} else {
//console.log('a');
$("#header").removeClass("header2");
}
});
I need to trigger click event on scroll, when the user scroll down 700px. Here is my code:
$(window).scroll(function(){
playVideo();
});
function playVideo() {
var wScroll = $(window).scrollTop();
if (wScroll > 700) {
$(".video a").trigger("click");
}
}
The problem is that it triggers indefinetely. I tried to ise one() with scroll, but it only uses one on scroll while I need it on trigger("click"). Please help.
Just unbind where you trigger:
$(window).on("scroll", playVideo);
function playVideo() {
var wScroll = $(window).scrollTop();
if (wScroll > 700) {
$(".video a").trigger("click");
$(window).off("scroll", playVideo);
}
}
(please notice that you didn't need to wrap playVideo in another function)
playVideoBoolean = true;
$(window).scroll(function(){
if (playVideoBoolean == true){
playVideo();
}
playVideoBoolean = false;
});
function playVideo() {
var wScroll = $(window).scrollTop();
if (wScroll > 700) {
$(".video a").trigger("click");
}
}
I have "fun facts" counter on my web site and also a jQuery function which animate counting
numbers inside fun facts div. Now it is triggered as page loads. I would like to start it when user scrolls down to it. For example when div appears 100px from the bottom of the screen.
This is my jQuery function which starts counting as page loads:
(function($) {
"use strict";
function count($this){
var current = parseInt($this.html(), 10);
current = current + 10; /* Where 50 is increment */
$this.html(++current);
if(current > $this.data('count')){
$this.html($this.data('count'));
} else {
setTimeout(function(){count($this)}, 50);
}
}
$(".stat-count").each(function() {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
});
})(jQuery);
and here is my try to make it work when user scrolls down to it:
(function($) {
"use strict";
function count($this){
var current = parseInt($this.html(), 10);
current = current + 10; /* Where 50 is increment */
$this.html(++current);
if(current > $this.data('count')){
$this.html($this.data('count'));
} else {
setTimeout(function(){count($this)}, 50);
}
}
$(window).scroll(function() {
$(".stat-count").each(function() {
var imagePos = $(this).offset().top;
var topOfWindow = $(window).scrollTop();
if (imagePos < topOfWindow+400) {
$(this).data('count', parseInt($(this).html(), 10));
$(this).html('0');
count($(this));
}
}
}
})(jQuery);
Thank you! :)
May be something like this:
$(window).on('scroll', function(event) {
if(document.body.offsetHeight - event.pageY <= 100 ) {
//onscoll effect
}
}
I have a map on the bottom of my webpage and when a user scrolls down to the map, I want the google marker to drop and that specific time. I have this working already. The problem is that it keeps calling the function, how do I call it only once?
This is my JS code right now and I have tried to figure the bug out:
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 300 &&
$(window).scrollTop() <= $(document).height() - $(window).height() - 200
) {
var dropOnlyOnce = (function(){
dropped = false;
if (dropped == false) {
dropMarker(); // this is the function I'm calling
}
dropped = true;
})();
}
});
How can I get this to work or how can I just call the dropMarker function once?
You could remove the listener once the function has been called:
$(window).on('scroll', function(e) {
if( ...window at scrollTop ) {
$(window).off('scroll')
.... Drop your pin
}
})
Esteban Felix's Comment brings up a good point. This will remove all scroll handlers. If that's not something that works for you, you can move the function outside the handler, and only remove that:
var dropPinOnce = function() {
if( ... window at correct scrollTop ) {
... Drop pin here ...
$(window).off('scroll', dropPinOnce)
}
$(window).on('scroll', dropPinOnce)
Try
var callbacks = $.Callbacks("once")
, dropMarker = function() {
// do stuff
};
callbacks.add(dropMarker);
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 300 &&
$(window).scrollTop() <= $(document).height() - $(window).height() - 200
) {
var dropOnlyOnce = (function(){
dropped = false;
if (dropped == false) {
callbacks.fire() // call `dropMarker` "once"
}
dropped = true;
})();
}
});
See jQuery.Callbacks at "Possible Flags" -> "once"
var callbacks = $.Callbacks("once")
, dropMarker = function() {
console.log(123)
};
callbacks.add(dropMarker);
$(window).scroll(function () {
if ($(window).scrollTop() >= $(document).height() - $(window).height() - 300 &&
$(window).scrollTop() <= $(document).height() - $(window).height() - 200
) {
var dropOnlyOnce = (function(){
dropped = false;
if (dropped == false) {
// dropMarker(); // this is the function I'm calling
callbacks.fire()
}
dropped = true;
})();
}
});
div {
height : 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>abc</div>
If you just unbind after your condition is met then your function will effectively only be called once.
$(window).scroll(function callOnceOnScroll() {
var $window = $(window),
$document = $(document);
if ($window.scrollTop() >= $document.height() - $window.height() - 300 &&
$window.scrollTop() <= $document.height() - $window.height() - 200) {
$window.off('scroll', callOnceOnScroll);
dropMarker(); // this is the function I'm calling
}
});
I'd like to add a class to an element when a user first scrolls away from the top of the page. If the user then scrolls back up and hits the top of the page I'd like that class removed.
Use of jQuery in the solution is fine.
try
$(window).scroll(function() {
$("id or class").removeClass("active");
var scroll = $(window).scrollTop();
if (scroll <= 500) {
$("#one").addClass("active");
}
else if (scroll <= 1000) {
$("#tow").addClass("active");
}
else {
$("#three").addClass("active");
}
}
So here is the solution you're looking for. Just customize it with your div tags.
$(document).ready(function () {
$(window).scroll(function(){
// get the height of #wrap
var h = $('#top').height();
var y = $(window).scrollTop();
if( y > (h*.25) ){
$("#sidef").fadeIn(1100);
} else {
$('#sidef').fadeOut(75);
}
});
});
var notAdded = true;
$(window).scroll(function(){
if( $(this).scrollTop() == 0){
$(elem).removeClass('classname');
notAdded = true;
}
else if(notAdded){
$(elem).addClass('classname');
notAdded = false;
}
});