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; }
Related
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/
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 designing a website and I'd like the navigation menu to fade in once I scroll down >50px. I'm using the following JavaScript with JQuery library:
(function ($) {
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.menu').fadeIn(500);
} else {
$('.menu').fadeOut(500);
}
});
});
})(jQuery);
The class .menu is set on {display: none;}.
This should work
$(document).ready(function(){
$(window).bind('scroll', function() {
var distance = 50;
if ($(window).scrollTop() > distance) {
$('nav').fadeIn(500);
}
else {
$('nav').fadeOut(500);
}
});
});
Codepen Demo
It's working for me.
Your .menu is probably at the top of a page and when you scroll you can't see it.
Add to test:
.menu {
position: fixed;
z-index: 10000; //just to check if it is behind the content
}
DEMO
Try this:
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 50) {
$('.menu').fadeIn(1000);
} else {
$('.menu').fadeOut(1000);
}
});
});
Just corrected your code! It works fine!
was wondering if it is possible to:
Fade out picture on mouseover AND then fade in different picture after the first fade out.
Fade out is easy with:
.overlay {
position: absolute; width: 269px; height: 344px; bottom:0;
left: 6%; z-index: 2; transition: opacity 1.5s ease; opacity:1;
}
.overlay:hover { opacity:0; }
The pictures are of different size.
This should work and allow you to do it completely in jquery
$( ".overlay" ).hover(function() {
$( this ).fadeTo( "slow" , 0, function() {
$( this ).attr("src", newIMGURL);
$( this ).fadeTo( "slow" , 1);
});
});
The issue with the other answer is it will change the img while it is still fading, which will not look pleasant, on mine it waits until the image has fully faded out to switch the image, then fades back in.
Edited to use a pure jQuery method.
$(document).ready(function() {
var changed = false;
$( ".overlay" ).mouseover(function() {
if(!changed) {
$(this).fadeTo("slow", 0, function() {
$(this).children('img').attr("src", "newjpg.jpg");
$(this).fadeTo("slow", 1);
});
changed = true;
}
});
});
jsFiddle: http://jsfiddle.net/8pFBB/
EDIT: With ability to revert to old image & queueing to prevent animations from stacking indefinitely when moving mouse over and away from object repeatedly
$(document).ready(function() {
$(".overlay").queue("fadeFx");
var fading = false;
$(".overlay").mouseover(function() {
if(fading) { $(".overlay").dequeue(); }
fading = true;
$(this).fadeTo( "slow" , 0, function() {
$(this).children('img').attr("src", "http://placehold.it/350x150");
$(this).fadeTo( "slow" , 1);
fading = false;
});
});
$(".overlay").mouseout(function() {
if(fading) { $(".overlay").dequeue(); }
fading = true;
$(this).fadeTo( "slow" , 0, function() {
$(this).children('img').attr("src", "http://placehold.it/150x350");
$(this).fadeTo( "slow" , 1);
fading = false;
});
});
});
http://jsfiddle.net/8uVHF/
$('.overlay').hover(function() {
$(this).fadeOut();
$(this).attr('src', 'newImage.png');
}
I have the following code:
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 150) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 900);
return false;
});
});
When you click on back to top it work's fine in IE6 - but when the fadeIn and fadeOut 'back to top' doesn't seem to work in IE6.
Try this
$(window).scrollTop() is the one that worked for me in all the current browsers
or
window.scroll(x, y);