I am trying to animate the menu bar(fixed positioned) when its scrolled down the opacity should change to 0.6 and when scrollTop() returns 0 its opacity should be 1.
Its working fine when I scroll down but when I scroll to the top sometimes the code works some times its opacity remains 0.6.
$(document).ready(function(){
$(window).scroll(function(){
if($(window).scrollTop() > 0){
$('.navbar').animate({opacity:0.6});
}
if($(window).scrollTop() <= 0){
$('.navbar').css('opacity','1');
}
});
});
try
if ( $(window).scrollTop() > 0)
{
$('.navbar').animate({opacity:0.6});
}
else
{
$('.navbar').css('opacity','1');
}
Related
Having problems with Scrolltop - have got it to change smoothly when scrolling down, but doesn't revert to the original css when scrolling back up.
I've tried switching the order around but nothing works. Can anyone tell me where my code is wrong?
Thanks
$(function() {
var topblock = $(".topblockfix");
var header = $(".header");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if ($(window).scrollTop() > $('.topblockfix').offset().top) {
if (scroll >= 250) {
topblock.removeClass("topblockfix").addClass("topblockfix-alt");
header.removeClass("header").addClass("header-alt");
} else {
topblock.removeClass("topblockfix-alt").addClass("topblockfix");
header.removeClass("header-alt").addClass("header");
}
}
});
});
You have a logical mistake in the first if-statement.
You are checking the offset top of $('.topblockfix'). But you remove the class .topblockfix and set it to .topblockfix-alt.
So you need to update your if statement:
if ($(window).scrollTop() > $('.topblockfix').offset().top || $(window).scrollTop() > $('.topblockfix-alt').offset().top) {
or you have to cache the value of $('.topblockfix').offset().top somewhere
I am trying to fade in a bootstrap's navbar when scroll top is below 100 and fade it out when is above 100. My code is not working as expected, it is fading just when the page wants. Where is the error?
jQuery's code:
$(document).scroll(function() {
if($(this).scrollTop() < (100)){
$(".navbar-default").fadeTo("slow", 1);
}
else{
$(".navbar-default").fadeTo("slow", 0.5);
}
});
There are two moments in your code:
1) You should use $(window).scrollTop() for top scroll value
2) use .stop(true, true) to prevent any glitch for animation
$(document).scroll(function() {
if($(window).scrollTop() < 100){
$(".navbar-default").stop(true, true).fadeTo("slow", 1);
}
else{
$(".navbar-default").stop(true, true).fadeTo("slow", 0.5);
}
});
I've been trying to fade out a splash when scrolling down, and fading it in when scrolling back to the top of the page. It seems to work ok when scrolling down, but when I go back, it doesn't fades in. I tryed using fadeIn and FadeOut instead of fadeTo but didn't get a proper behavior
The code is actually pretty simple:
var splashTop = $('.splash-container').offset().top;
$(window).scroll(function () {
if ((splashTop - $(window).scrollTop()) < 50) {
$('.splash-container').stop().fadeTo("slow", 0);
} else {
$('.splash-container').stop().fadeTo("fast", 1);
}
});
And here is the jsFiddle example:
jsFiddle
If you just need to check if the scroll is at the top or not then you don't need to check the position of the Splash, Try:
$(window).scroll(function () {
if ($(window).scrollTop() > 0) {
$('.splash-container').stop().fadeTo("slow", 0);
console.log('p')
} else {
$('.splash-container').stop().fadeTo("fast", 1);
console.log(box1Top)
}
});
Check the Demo Fiddle
Edit
Now why your code doesn't work? ... Because you are always getting a value less than 50:
splashTop = 8 always
-
$(window).scrollTop() = more than 0
Then the result is always negative or 8 as max, you can never have a number more than 8 and your else condition is useless.
I'm trying to have my content fade in when reaching a certain proximity to to respective ends of the page. The fade works fine when the trigger is set to the very top and bottom but when I set a distance (200px) the fade no longer works and the content simply appears.
$(window).scroll(function(){
if($(window).scrollTop()<=200){
$('#about .content').stop(true,true).fadeIn("5s");
}
else {
$('#about .content').stop(true,true).fadeOut("10s");
}
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 200) {
$('#work .content').stop(true,true).fadeIn("5s");
} else {
$('#work .content').stop(true,true).fadeOut("5s");
}
});
What is happening is that you have two functions working against each other:
The first function has an "if-else" statement and the second function as well.
That means that each function does something EVERYTIME you scroll.
There are multiple ways of solving this.
The way I would solve it is using a variable and updating the constraints.
Let's say we have a variable onScreen that has value 1 if the paragraph is on the screen and value 0 if it isn't:
For example:
<div style="height: 800px">Example of scroll with fadeIn, fadeOut.
<p style="margin-top:300px;">These paragraphs will go away when you have scrolled
more than 10 pixels from the top. They will appear again when you have scrolled
to a proximity of 50 pixels from the bottom. They will also appear if you go
within a proximity of 10 pixels of the top again.</p>
</div>
Now for the jQuery code:
var $onScreen = 1;
$(window).scroll(function(){
if($(window).scrollTop() < 10){
if ($onScreen == 0)
{
$("p:first").stop(true,true).fadeIn("slow", "linear");
$onScreen = 1;
}
}
if($(window).scrollTop() <= 20 && $(window).scrollTop() >= 10){
if ($onScreen == 1)
{
$("p:first").stop(true,true).fadeOut("slow", "linear");
$onScreen = 0;
}
}
if ($(window).scrollTop() + $(window).height() >= $(document).height() - 50) {
if ($onScreen == 0)
{
$("p:first").stop(true,true).fadeIn("slow", "linear");
$onScreen = 1;
}
}
});
Now this is not the most concise way of doing it and I didn't mean to do so: by making the code a bit more extensive I hope you can follow why it works now and didn't work before (such that you actually learn from it).
I prepared a live example for you on Fiddle: http://jsfiddle.net/ycCAb/4/
I hope this answers your question. Good luck!
I have a header that I want to fade in when the user scrolls past the first section on the page. I use a div with opacity 0 which changes to opacity 1 like so:
$(window).scroll(function () {
// If the scroll position is past the 1st section...
if ($('body').scrollTop() > 500) {
$('#ribbon').css('opacity', 1);
} else {
$('#ribbon').css('opacity', 0);
}
});
This works fine but when I try to animate the opacity using either fadeIn() or animate(), it stops working and will not fade in the div.
LIVE DEMO
$(window).scroll(function () {
var opacity = $(this).scrollTop() > 500 ? 1 : 0 ;
$('#ribbon').stop().fadeTo(800, opacity);
});