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')
}
});
});
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) {...})
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.
I am trying to an achieve an effect like the one demonstrated here:
http://templateocean.com/stamp/image-bg/1-home-style-one/index.html
The navbar flies in after you scroll to a certain position.
I used this script as a baseline:
//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");
}
});
css:
#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;
/* display: none;*/
}
.top-nav-collapse {
padding: 0;
display: block;
}
}
This changes the navbar height. I played around with the 'display:' parameter and it works to an extent; however, the navbar was popping up without the nice slide effect.
I tried to use this script:
https://api.jqueryui.com/slide-effect/
so I changed the original code to:
(window).scroll(function () {
if ($(".navbar").offset().top > 50) {
$("#navbar-top").toggle("slide");
} else {
$("#navbar-top").toggle("slide");
}
});
Now, however, I am getting the following error:
Uncaught TypeError: Failed to execute 'scroll' on 'Window': 2
arguments required, but only 1 present.custom.js:22 (anonymous
function)
What I am doing wrong? Do I have to really use JS for the slide effect? Can I use some other CSS attributes to achieve the same effect?
Make sure that you load jquery before the other js scripts.
I'm having a small issue with my code. I have an element that when the page scrolls it will appear. However, I cannot get it to "appear" in a smoother way. I have tried CSS transitions and attempted fadeIn but neither work. It always just "jumps" in, I cannot get it to ease in.
Here is the code:
$(window).on("scroll", function () {
$('.navbar').toggleClass('visible', $(document).scrollTop() > 40);
});
So it appears just fine, but I can't figure out how to animate adding the class name.
This is the CSS btw:
.navbar {
visibility: hidden;
}
.navbar.visible {
visibility: visible;
}
visibility can't be animated with CSS transitions.
But you can do :
.navbar {
opacity: 0;
transition: opacity .5s ease; // Feel free to use prefixes.
}
.navbar.visible {
opacity: 1;
}
CSS transition / animations is surely the best way to animate something in 2014. You should avoid fadeToggle() and others jQuery animation methods.
instead of using toggleClass, use fadeToggle. it will do everything for u as far as CSS..
give it a try, just fadeToggle();
Here is the example of your code with correct css transition. You cannot animate visibility, but you can play with position and opacity.
http://jsfiddle.net/xZ6fm/
.navbar {
position: fixed;
top: -100px;
left: 0; right: 0;
padding: 12px;
opacity: 0;
background: #ccc;
}
.navbar.visible {
top: 0;
opacity: 1;
-webkit-transition: top 0.3s linear, opacity 0.7s linear;
-moz-transition: top 0.3s linear, opacity 0.7s linear;
transition: top 0.3s linear, opacity 0.7s linear;
}
As indicated in the other answer, fadeToggle() will get the work done for you. And frankly, it's probably the easiest way to accomplish such an effect.
CSS transitions require the transition property. Place this block of code in each of your CSS declarations:
transition: visibility .25s linear;
-webkit-transition: visibility .25s linear;
-moz-transition: visibility .25s linear;
-o-transition: visibility .25s linear;
If you have difficulties with visibility, try using opacity instead.
So I have created a little box with some CSS animation:
.boxtest
{
width: 50px;
height: 50px;
background-color: green;
opacity: .2;
transition: opacity .8s, width .8s ease-out;
-moz-transition: opacity .8s, width .8s ease-out;
-webkit-transition: opacity .8s, width .8s ease-out;
-o-transition: opacity .8s, width.8s ease-out;
}
.boxtest:hover {
opacity: 1;
width: 70%;
}
What I'd like is for the CSS hover class to remain permanent after the user has hovered their mouse over the element.
I guess you'd need to use Javascript, but I'm no expert so can't figure out the right command. Any help would be awesome!
http://jsfiddle.net/r75gC/
Here you go!
Basically I used jQuery to add a class to the div. You can choose one of the two below.
//onClick
$(".boxtest").on("click", function () {
$(".boxtest").addClass('permahover');
});
//onHover
$(".boxtest").on("mouseenter", function () {
$(".boxtest").addClass('permahover');
});
I changed the CSS to:
.boxtest:hover,
.permahover {
opacity: 1;
width: 70%;
}
http://jsfiddle.net/rFRc5/2/
If you haven't a lot of experience with javascript I would recommend using JQuery. Use this to include the JQuery libraries in your website:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
this will allow you to simply do (in your html file):
<script>
$(".boxtest").mouseenter(function() { $(".boxtest").addClass("boxtestHover"); });
</script>
also for the above change .boxtest:hover to boxtesthover (or whatever you want)
jQuery is a bit overkill for this.
Instead of hover, use another class name, then just add this to the element
onmouseover="this.className='newClassName'"