hi i was doing a search about how to make my navbar fadeIn while scrolling down and fadeOut while scrolling Up and found nice topic helped me alot
Fading bootstrap navbar on scrolldown, while changing text color
also http://jsfiddle.net/f5UTL/
the problem is it's not fading in or out while scrolling its just appear and disappear no dynamic animation it's even moving my page while this process it is appreciated if some one told me where was my mistake at
< script >
$(function () {
var header = $('.opaque');
$(window).scroll(function () {
var scroll = $(window).scrollTop();
if (scroll >= 300) {
header.removeClass('opaque').addClass('navbar-fixed-top').fadeIn();
} else {
header.removeClass('navbar-fixed-top').fadeOut().addClass('opaque');
}
});
});
< /script>
.navbar-fixed-top {
background-color: rgba(128,128,128,1);
transition: background-color all 2s;
-webkit-transition: background-color all 2s;
-moz-transition: background-color all 2s;
-o-transition: background-color all 2s;
}
.navbar-fixed-top .opaque {
background-color: rgba(128,128,128,0);
transition: background-color all 2s ;
-webkit-transition: background-color all 2s ;
-moz-transition: background-color all 2s ;
-o-transition: background-color all 2s ;
}
here is the simplified version of what you want to achieve .
$(function() {
//caches a jQuery object containing the header element
var header = $('#nav');
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= header.height()) {
header.fadeOut();
} else {
header.fadeIn();
}
});
});
Hope it will help you to continue.
updated fiddle.
Related
I'm using a bit of jquery to have a Bootstrap 4 navbar fade in when scrolling down past a certain point, by adding and removing a specific class. However, the code I have won't show the navbar if I reload the page having already scrolled down, and when scrolling back up the CSS transition doesn't fade the bar out but simply pops out of view instantly. How can I fix those issues? Would it be better to rely on purely jquery instead of relying on a CSS class? If so, how would that work? Thanks!
JS:
$(window).scroll(function(e) {
if($(window).width() >= 768)
var scroll = $(window).scrollTop();
if (scroll >= 300) {
$('.navbar-home').addClass("navbar-hide");
} else {
$('.navbar-home').removeClass("navbar-hide");
}
});
CSS:
.navbar-home {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
-webkit-transition: opacity .2s ease-in-out;
}
.navbar-hide {
opacity: 1;
visibility: visible;
}
You also need to call the same code on page load. Change the listener to:
$(window).on("scroll load", function(e) {...})
I have searched and looked through a lot of posts and seen a lot of answers, tried them with no luck.
I got it working with jquery color animation, but then i have to link another library which id like to avoid.
I tried the CSS animation which i couldnt make work, because when i remove the css class it doesnt get the chance to make the fadeout effect..
It is only the fadein/fadeout effect that doesnt happen. The background color switches correctly.
TL;DR: Want my top navigation bar to go from transparent background to white background when visitor has scrolled X amount from top, and then back to transparent when visitor is close to top of page with a smooth transition effect.
$(document).ready(function(){
$(document).scroll(function(){
if ($(this).scrollTop() > 200) {
if ($("#topnav").hasClass('transparent')){
$("#topnav").removeClass('transparent');
$("#topnav").addClass('black').fadeIn(1000);
}
} else if ($(this).scrollTop() < 200) {
if ($('#topnav').hasClass('black')){
$('#topnav').removeClass('black');
$('#topnav').addClass('transparent').fadeIn(1000);
}
}
});
});
why doesnt this work?
You can simply set the background color with CSS, and use CSS transition to achieve the fade in / fade out effect.
.box {
background-color: black;
-webkit-transition: background-color 2s;
transition: background-color 2s;
}
And in Javascript you can set the color:
if ($(this).scrollTop() > 200) {
$("#topnav").css({"background-color", "yellow"});
}
jsfiddle
Try out this simple example
In Your CSS file,
.transparent-background {
background-color: transparent;
-webkit-transition: background-color 1000ms ease;
-ms-transition: background-color 1000ms ease;
transition: background-color 1000ms ease;
}
.black-background {
background-color: black;
-webkit-transition: background-color 1000ms ease;
-ms-transition: background-color 1000ms ease;
transition: background-color 1000ms ease;
}
And in your js file just add class before that attach transparent-background class to topNav container
$(document).ready(function(){
$(document).scroll(function(){
if ($(this).scrollTop() > 200) {
$("#topnav").removeClass("transparent-background").addClass('black-
background')
} else {
$("#topnav").removeClass("black-
background").addClass('transparent-background')
}
});
});
I am trying to add the background color to a .top-barz element when I click on another element, but I would like to make that as an animation in duration of 1s. I am pretty new to javascript and not sure how to do that?
I would like to animate from change opacity of rgba(36,36,36, .1) to rgba(36,36,36, 1)
I have come up with this code and put it into my on click function, but this is obviously not working:
var topBar = setInterval(function(){ topBarBackground() }, 1000);
function topBarBackground() {
for (var i = 1; i <= 9; i++) {
$('.top-barz').css('background-color', 'rgba(36,36,36,.' + i + ')');
}
}
clearInterval(topBar);
You may consider the fadeIn function of jQuery.
$('.top-barz').fadeIn(10000);
Here is some sample code to get you started
JQuery
$('.button').on('click', function() {
$('.top-barz').addClass('new-color');
});
CSS
.top-barz {
background-color:#000;
-webkit-transition: background-color 1s linear;
-moz-transition: background-color 1s linear;
-o-transition: background-color 1s linear;
-ms-transition: background-color 1s linear;
transition: background-color 1s linear;
}
.top-barz.new-color {
background-color:#eee;
}
Obviously you would change the colors to whatever color you want for your design.
EDIT
Here is the Fiddle
Seems to be working fine in chrome on my end
Michael McCoy is totally right in his comment. I would do the same as you will also benefit from GPU acceleration if you use CSS and it will make your code lighter.
This apart, your code has 2 errors:
missing i++
missing var i
_
function topBarBackground() {
for (var i = 1; i < 9; i++) {
$('.top-barz').css("background-color", "rgba(36,36,36,." + i + ")");
}
}
var myVar = setInterval(function(){topBarBackground()}, 1000);
Anyway, drop this idea.
So to add class just do $('.top-barz').addClass('changedColor');
and in css:
.top-barz {
background-color: rgba(36,36,36,.1);
-webkit-transition: 1s;
-o-transition: 1s;
transition: 1s;
}
.top-barz.changedColor {
background-color: rgba(36,36,36,1);
}
Im using scrolling-nav-js Scrolling nav to animate padding and fix my navbar to the top of my page and i want to give the navbar a subtle opacity animation. How can i add the transition to change the opacity property?
I have the following code in the JS and the CSS files:
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
if ($(".navbar").offset().top > 50) {
$(".navbar-fixed-top").addClass("top-nav-collapse");
} else {
$(".navbar-fixed-top").removeClass("top-nav-collapse");
}
});
//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
#media(min-width:767px) {
.navbar {
padding: 20px 0;
-webkit-transition: background .5s ease-in-out,padding .5s ease-in-out;
-moz-transition: background .5s ease-in-out,padding .5s ease-in-out;
transition: background .5s ease-in-out,padding .5s ease-in-out;
}
.top-nav-collapse {
padding: 0;
}
}
Nevermind :) adding this is perfect.
transition: background .5s ease-in-out,padding .5s ease-in-out, opacity .5s ease-in-out,opacity .5s ease-in-out;
and
.top-nav-collapse {
padding: 0;
opacity: 0.6;
Good evening everybody!
I wrote a JavaScript that slides through a several amount of images with a fade effect.
In Chrome and Opera it workes fine, but in the other browsers the pictures switch but the fade effect doesn´t work.. I don´t know why.
Here is my css for my body background:
body{
-webkit-transition: background 1.5s ease;
-moz-transition: background 1.5s ease;
-o-transition: background 1.5s ease;
-ms-transition: background 1.5s ease;
transition: background 1.5s ease;
}
You see I dont forget the prefixes!
Here is my JavaScript:
var rnd_last = -1;
var picInterval;
var picsArray = new Array('url(hd1.jpg)', 'url(hd2.jpg)', 'url(hd3.jpg)', 'url(hd4.jpg)');
$('document').ready(function() {
startPicInterval();
$(window).resize(function()
{
clearInterval(picInterval);
startPicInterval();
});
});
function setBodyBackground(actualPic)
{
$('body').css({'background-image': actualPic});
}
function startPicInterval()
{
if ($(window).width() >= 1200)
{
picInterval = setInterval(function() {
setBodyBackground(picsArray[getRandomNumber(1, picsArray.length)]);
}, 5000);
}
}
function getRandomNumber(min, max)
{
var rnd;
do
{
rnd = Math.floor((Math.random() * max) + min);
} while (rnd === rnd_last);
rnd_last = rnd;
return(rnd);
}
I hope anybody can help me, grateful Nico!