How can I use this code with fadein()?
$(window).scroll(function() {
$("div").each(function() {
if ($(window).scrollTop() > $(this).offset().top - 100) {
$(this).css('opacity', 1);
} else {
$(this).css('opacity', 0);
}
});
});
I suggest you to use the fadeTo() function. It's really simple and it changes the opacity of an object.
This is the code to fade:
$(selector).fadeTo(duration,opacity,complete);
The duration is expressed in milliseconds, the target must be between 0 and 1, where 1 visible and 0 is not. The last parameter is a function to execute when the fade has ended. If you want to fade to 1, use this code :
$(window).scroll(function() {
$("div").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 100 ) {
$(this).fadeTo(500,1);
} else {
$(this).fadeTo(500,0);
}
});
});
This lets you fade in your object. Anyway, I think that your trying to fade in an object when you are scrolling, and this couldn't be the best way to do this.
References :
https://api.jquery.com/fadeTo/
Related
I have a jquery code that I've indicated below. These codes run, When I start scrolling (I mean when the height of scroll is more than 100)
But I want to run just for once, immediately after height of 100, and not to be run more than once.
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
//some codes...
}
});
How can I do this? Thank you :)
As soon as your condition is met, unbind the scroll handler:
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
//Kill the handler
$(window).off("scroll");
//some codes...
}
});
use
$(window).unbind('scroll');
When you enter first time
$(window).scroll(function(){
if ($(window).scrollTop() > 100 ){
$(window).unbind('scroll');
//some codes...
}
});
Bind the scroll event to $(window), then when scrollTop() > 100, execute your action then unbind the scroll event from $(window)
$(document).ready(function() {
$(window).bind('scroll', function() {
if ($(this).scrollTop() > 100) {
$('body').prepend('Scroll top > 100');
$(window).unbind('scroll');
}
});
});
body { min-height: 1000px }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
http://codepen.io/pen/
ok this can be done with the help of global variable or flag in order to see the effect first put lots of data into the page so that you can see vertical scroll.
<script>
var flag = 0;
$(document).ready(function() {
$(window).scroll(function() {
if (flag == 0) {
if ($(window).scrollTop() > 100) {
alert('1st time');
flag = 1;
}
} else if (flag == 1) {
alert('second time and u can comment this alert');
}
});
});
</script>
The .off() function will stop the function from firing after the first time.
$(document).ready(function () {
$(window).on('scroll.myEvent', function() {
if ($(document.body.scrollTop > 100))
{
$(window).off('scroll.myEvent');
alert('fired');
}
});
});
Example: http://jsfiddle.net/2k3s9jx8/
I have this code:
$(window).scroll(function () {
if ($(this).scrollTop() > ($animate.headline.height() + 100)) {
$animate.header.velocity({height: "50px"}, { queue: false });
} else {
$animate.header.velocity({height: "100px"}, { queue: false });
}
});
If user scrolls xxx pixels from top then animation should start, and that works just fine.
One thing I just noticed and it bothers me - every time I scroll, velocity animation is checking that scrollTop, so overall animation isn't smooth when I'm scrolling, because before animation is triggered function is checking scroll.
Is there any other way to make it smooth?
Example:
http://codepen.io/anon/pen/bIkqF
Would you prefer a CSS approach instead?
Set your header's css to :
-webkit-transition: all 0.5s;
position:fixed;
top:0;
left:0;
Add a new class for the desired height:
.shrink{
height:50px;
}
And in you js toggle the class :
var header = $('.header');
$(window).on('scroll', function () {
if ($(this).scrollTop() > (header.height() + 20)) {
header.addClass('shrink');
} else {
header.removeClass('shrink');
}
});
Tinker with the seconds property of transition for a smoother effect.
This way the GPU does the heavy lifting and class toggles performance hit is negligible.
Demo
You should throttle your check with some library like Ben Alman's one : https://raw.githubusercontent.com/cowboy/jquery-throttle-debounce/v1.1/jquery.ba-throttle-debounce.min.js.
Check this documentation page : http://benalman.com/projects/jquery-throttle-debounce-plugin/.
For your example, you can use it like this :
$(window).scroll($.throttle(250, checkTop));
function checkTop() {
if ($(this).scrollTop() > ($animate.headline.height() + 100)) {
$animate.header.velocity({height: "50px"}, { queue: false });
} else {
$animate.header.velocity({height: "100px"}, { queue: false });
}
}
I'm trying to change the Opacity of an element when I scroll down. and change the opacity back to its normal state when I scroll back to the top. But I'm having problems doing this.
#menu
{
opacity:0.6
}
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$( "#menu" ).fadeTo("fast", 1);
} else {
$( "#menu" ).fadeTo("fast", 0.6);
}
});
The above code doesn't work or in some cases it works after a bit and stops again! I'm really confused cause I tried the code below to simply fade it and it works without a hitch.
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$( "#menu" ).fadeOut();
} else {
$( "#menu" ).fadeIn();
}
});
I would do this:
$(window).scroll(function ()
{
if (window.pageYOffset > 100)
{
$('#menu').addClass('no-opacity');
}
else
{
$('#menu').removeClass('no-opacity');
}
});
in css:
.no-opacity { opacity:0; }
in css again: make the change happen gradually:
#menu { transition: all 0.5s linear 0s; }
First of all, I recommend to use .stop() before fadeTo method, as you are executing it on every scroll event!
After that, your two code blocks are not the same, in the first one, you are showing element (opacity 1) if scroll is greater than 100, the second code is vice versa, try this:
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$( "#menu" ).stop().fadeTo("fast", 0.6);
} else {
$( "#menu" ).stop().fadeTo("fast", 1);
}
});
jsFiddle Demo.
To make it short, you could do it like this:
js
var _st;
$(window).scroll(function ()
{
_st = $(this).scrollTop();
$('#menu').css({opacity:(_st > 100) ? 0 : 1 });
})
css
#menu { transition: opacity 0.5s linear 0s; }
Is it possible to trigger a function mid way through an animation?
The animation includes a solid block which swipes over an image from top to bottom - I would like to trigger a function at the point that the image is completely covered and remove the image from the html (mid way through the animation)
My current function is -
function animateCover() {
$('#cover').animate({ bottom: '1400px'}, 4000, function() { });
}
The image is completely covered at 800px point - can I access this property to trigger a function?
since there isn't a tick counter in jQuery, you need to "emulate" it:
function animateCover() {
var
$cover = $('#cover'),
interval = setInterval(function(){
if ($cover.is(':animated')){
if (parseInt($cover.css('bottom')) > 800){
alert('trigger');
clearInterval(interval);
}
} else {
clearInterval(interval);
}
}, 13); // 13 is the minimum possible in Javascript
$cover.animate({ bottom: '1400px'}, 4000, function() { $cover.text('done'); });
}
jsFiddle: http://jsfiddle.net/emV4p/1/
What about splitting the animation into 2.
function animateCover() {
$('#cover').animate({ bottom: '700px'}, 2000, function() {
$('#imgID').hide();
$('#cover').animate({ bottom: '1400px'}, 2000 );
});
}
Updated: Here's a perfectly working solution with minimal code-
WORKING DEMO
jQuery-
$(document).ready(function(){
setInterval(function(){
$("#image").css('background-image','none');
},2000);
$("#block").animate({
bottom:'400px'
},3000);
});
I've made this little snippet to scroll the window to the top of the page.
$(window).scroll(function(){
$("#scrollup").fadeIn("slow");
});
$("#scrollup").click(function(){
$('html, body').animate({ scrollTop: 0 }, 'normal', function() {
$("#scrollup").fadeOut("slow");
});
});
However, when the scrollup div fades out after the window scrolls, it fades back in. How do I stop this from happening? Thanks.
I think I have found a reasonable solution
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
Would this be easier than changing my original code?
Check out .stop(): http://api.jquery.com/stop/
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').stop().fadeIn();
} else {
$('.scrollup').stop().fadeOut();
}
});
You should make sure that the scrollup div isn't faded in when you are at the top or when it is already faded in ( visible )
$(window).scroll(function(){
if ( $(window).scrollTop() !== 0 or $("#scrollup").is(":hidden") ) then {
$("#scrollup").fadeIn("slow");
}
});
You could just add an if statement to check if it is at the top:
$(window).scroll(function(){
if($("body").scrollTop()!=0)
$("#scrollup").fadeIn("slow");
});
$("#scrollup").click(function(){
$('html, body').animate({ scrollTop: 0 }, 'normal', function() {
$("#scrollup").fadeOut("slow");
});
});