I'm doing a scrollTop jQuery function, and it is working very nice, see it below:
$(function() {
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top >= 1225) {
// Do something
}
});
});
However, if the user have his scrollTop, in that case, higher than 1225, and the script isn't fully loaded, the function will not happen, just if he scroll the page again. Isn't there a way to make the scrollTop to always check, not just if the user Scrolls the page?
Thanks a lot in Advance.
Yes, trigger the event yourself.
$(function() {
$(window).scroll(function() {
var top = $(document).scrollTop();
if (top >= 1225) {
// Do something
}
}).triggerHandler("scroll");
});
Related
I am trying to do a simple task but I just can't see what I am doing wrong.
My goal is to add a class on my <nav> when the user scroll to the bottom of the page, and remove it when the he scrolls back to top.
Here's the code. PS: There's no error message on my console, and I tested if the jQuery is correctly implemented (and it is). I'm using a recent version
<script type="text/javascript">
$(window).on('scroll', function() {
if($(window).scrollTop()){
$('nav').addClass('when-scroll');
}else {
$('nav').removeClass('when-scroll');
}
})
</script>
you can try this;
var scrollTop = $(window).scrollTop()
$(window).on('scroll', function() {
if($(window).scrollTop() < scrollTop){
$('nav').addClass('when-scroll');
}else {
$('nav').removeClass('when-scroll');
}
scrollTop = $(window).scrollTop()
})
I have this function:
$(document).ready(function() {
if ($(".splash").is(":visible")) {
$(".site").css({"opacity":"0"});
}
});
$(window).scroll(function(){
$(window).off("scroll");
$(".splash").slideUp("800", function() {
$("html, body").animate({"scrollTop":"0px"},100);
$(".site").delay(100).animate({"opacity":"1.0"},800);
});
})
I use this to pass from splash page to home in animation way. But when I'm in home page the scroll is still off and I need it to make a change in hte header. I use this code:
$(document).ready(function( $ ) {
$(window).scroll(function() {
var sT = $(this).scrollTop();
if (sT >= 200) {
$('header').addClass('scroll-header')
} else {
$('header').removeClass('scroll-header')
}
});
});
This two parts fight together!! How can I put on scroll after splash page to go out? Thanks!
In the end i have try to not use scroll off, and change with a simple
.show_splash{position: fixed;}
In this way finely work!!!
I'm only learning JS(jQuery), and so I have a question. I wrote script where div is being showed when user scroll page to bottom and I want to add close button, so the user click on it and it will not appear when user scroll to bottom again. So:
<script>
$(window).scroll(function() {
if($(window).scrollTop() > ($(document).height() - $(window).height() - 200)) {
$('#div-name').css('visibility', 'visible')
}
};
$('#close-button).click(function(){
$('#div-name').css('visibility', 'hidden')
});
</script>
Pretty simple, but I want close-button it hide forever(till refreshed or revisit) and scroll function don't show this div for second time.
So I thought, if I do like this:
<script>
var wasClosed = false;
if(!wasClosed) {
$(window).scroll(function() {
if($(window).scrollTop() > ($(document).height() - $(window).height() - 200)) {
$('#div-name').css('visibility', 'visible')
}
}
};
$('#close-button).click(function(){
wasClosed = true;
$('#div-name').css('visibility', 'hidden');
});
</script>
But I don't understand why it not working, it keep popup again and again after i clicked close button.
FYI: You have some syntax errors in your code - missing semicolons and a missing parenthesis.
Option 1: You can unregister the scroll listener after clicking the button. Then the function where you put the visibility to visible will not be called anymore at all. Of course this only works if you don't use any other scroll scripts.
$(window).scroll(function() {
if($(window).scrollTop() >
($(document).height() - $(window).height() - 200) ) {
$('#div-name').css('visibility', 'visible');
}
});
$('#close-button').click(function(){
$('#div-name').css('visibility', 'hidden');
$(window).off('scroll');
});
Fiddle: https://jsfiddle.net/kx6fkp7n/
Option 2: initialize a variable in which you save the status, if it has been closed already. As soon as the button is pressed, you set the variable to true and in the scroll listener you make sure that the visibility changing does not occur anymore by extending the condition.
var wasClosed = false;
$(window).scroll(function() {
if(!wasClosed && $(window).scrollTop() >
($(document).height() - $(window).height() - 200) ) {
$('#div-name').css('visibility', 'visible');
}
});
$('#close-button').click(function(){
$('#div-name').css('visibility', 'hidden');
wasClosed = true;
});
Fiddle: https://jsfiddle.net/6dk443zd/
Why is your code not working: The problem with your solution is that you placed the if-condition before registering the scroll handler. So once it's registered (which is actually always on every page load) you're actually doing nothing with the changed variable. The if condition would need to be placed inside the scroll listener as stated in option 2.
I am trying to add a class to the header if the user scrolls past the div #home - and remove the class when you scroll back to the top.
The issue is, when you scroll past the div it adds the class but when you keep scrolling and then scroll back up, the class does not get removed. The event is only firing once...
I created this jsFiddle here - https://jsfiddle.net/breezy/9evksr7y/
It works in my jsFiddle file but not on my actual web page, I've also tried this...
$(window).on( 'scroll', function() {
var header = $('#header'),
target = $("#home").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() > 400) {
// alert("made it!");
header.addClass('fixed');
clearInterval(interval);
} else {
header.removeClass('fixed');
}
}, 250);
});
But it still does not work. Any idea what I am doing wrong?
Thanks
Edit: The issue was that one of my other functions in the same document was conflicting w/ this scroll function.
So I made some minor tweaks to the code. Not sure what the issue was but this seemed to work for me on my webpage.
$(window).on('scroll', function() {
var header = $('#header'),
target = $("#home").offset().top;
if ($(window).scrollTop() > target) {
header.addClass('fixed');
} else {
header.removeClass('fixed');
}
});
I am trying to implement tiny-scrollbar into my website and, i want to change target from tiny-scrollbar to body when it reaches top or end of body, how can i do this,please help.
not able to understand your question completely...but is this what you want?
FIDDLE DEMO
$(document).ready(function () {
$(window).scroll(function(){
var ScrollTop = parseInt($(window).scrollTop());
console.log(ScrollTop);
if (ScrollTop == 0) {
alert("i just hit the t0p");
}
else if(ScrollTop == 1574){
alert("i just hit the bottom");
}
});
});
UPDATE:
UPDATED FIDDLE
Just use console log to check the scrollTop and give your conditions accordingly.Hopw this helpps