How can I animate a sticky navbar - javascript

My project has a sticky header after scrolling that uses this script:
$(document).ready(function() {
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 385) {
$('#nav').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 386) {
$('#nav').removeClass('navbar-fixed');
}
});
});
How can I animate this so that it looks better?

You can animate your fixed nav bar like this:
.navbar-fixed {
animation: mymove 0.2s ease-in-out;
#keyframes mymove {
from {
top: -20px;
}
to {
top: 0px;
}
}
}
Move the nav bar element from -20px to 0px top. The animation lasts for .2s seconds.
Hope this help you :)

You can also use jQuery animations. as you are already using jQuery

You can use CSS and key frames to animate to the class added and removed. Here below similar questions by using key frames for smooth scrolling
smooth scrolling sticky header

Related

Always playing css animation when adding/removing class from div

at the moment I move a div by adding/removing a class (playing), which is working perfectly.
Now I want this to be more smooth and thought about adding some css animations.
The problem is, I dont understand how to add an animation, which is playing when Im either removing or adding this class. Is this even possible?
.description-container {
position: absolute;
margin-top: -11%;
}
.description-container.playing {
margin-top: 0%;
}
I tried this for the transition from top to bottom (the result of adding the playing class to my div), but it didnt work:
.description-container.playing {
animation: top-to-bottom 1s ease-in forwards;
}
#keyframes top-to-bottom {
100% {
margin-top: 0%;
}
}
How can I do this?
For animations, you can use the CSS attribute transition.
Have a look here.
In your example, you can use something like
.description-container {
position: absolute;
margin-top: -11%;
transition: margin-top 5s linear;
}
.description-container.playing {
margin-top: 0%;
}
That means that the transition applies on margin-top changes
The animation has a duration of 5 seconds
And has a linear speed curve

Making an image visible/invisible depending on the scroll position

So, i have a little arrow in my page:
<img src="images/arrow_up.png">
I wanna make it invisible when the page is at the top and then, as the user scrolls down, to make it visible so the user can click to go back to the top of the page.
This Javascript doesn't seem to be working:
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
I also have this css (which is working):
.scrollToTop{
padding: 1em;
color: #444;
position: fixed;
right: 0;
bottom: 0;
-webkit-transition: -webkit-transform .3s ease-in-out;
-ms-transition: -ms-transform .3s ease-in-out;
transition: transform .3s ease-in-out;
z-index: 1;
}
.scrollToTop:hover{
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
}
I'd apreciate some help! :)
Not sure if your exact issue was this, but copying your code into a JS fiddle revealed that if the page was less than the window height, the arrow would always show.
A fix for this was to include a default display:none and then check window height on scroll. Checking it every time would allow the page to grow and shrink and still allow the arrow to only display when needed.
A working example can be seen at this JSFiddle.
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
ShowScroll();
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
function ShowScroll() {
if (window.innerHeight < $("body").height())
{
var elem = $(".scrollToTop");
if (elem.css("display") == "none") elem.css("display","inline");
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
} else {
$(".scrollToTop").css("display","none")
}
}

Make multiple progress bars animate when scrolled past anchor point

Here is my site.
http://www.colleenbowes.com/#skills
I have messed around with this a lot that I kind of gave up. I still want it to animate but I am confused as to how. All I want is for my skill bars to animate when you scroll past an anchor point.
This is my animation:
Heres whats my css animation would look like on each bar (different widths though)
-webkit-animation: slide 3s forwards;
-webkit-animation-delay: 3s;
animation: slide 3s forwards;
animation-delay: 3s;
#-webkit-keyframes slide {
from {width: 0%;}
to { width: 90%; }
}
#keyframes slide {
from {width: 0%;}
to { width: 90%; }
}
Thanks.
How about this:
var target = $("#skills").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() >= target) {
// do your animation
clearInterval(interval);
}
}, 350);
Keep in mind that this is designed to run just the first time it is visible... no sure if this is expected. Also, since you do not describe your animation, I've just added the code that should detect your scrolling. If you add a bit more detail on your animation, I could extend the answer.
Hope this helps.

Jquery function preventing website to scroll all the way down

I have a fixed header on my website that shrinks on page scroll with this function:
jQuery(document).ready(function($) {
$(window).scroll(function () {
if ($(window).scrollTop() > 350) {
$('header').addClass('shrink');
}
else{
$('header').removeClass('shrink');
}
});
});
When viewing the website on a mobile device, I want to remove the fixed header, leaving it to be just a regular header, so this is what I did:
if ($(window).width() < 769) {
$('header').removeClass('shrink');
}
The problem is that now the website won't scroll all the way down on mobile.
Can anyone help me fix this, please?
Instead of doing it in JavaScript why don't you try CSS.
#media screen and (max-width: 769px) {
.shrink {
/* write your rules here.*/
}
}
You should post your code or URL. I have no idea what's the logic behind remove "shrink" class, from the code you provided, it seems you haven't added that class to the header, but you are removing it.
I think the best solution in your case would be remove the position CSS rule for mobile devices.
Sorry... stackoverflow doesn't allow formatting in comment.
Try this...
.shrink {
position:fixed;
clear:both!important;
width:100%;
height:50px!important;
max-height:50px!important;
min-height:50px!important;
z-index:999999999;
transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
}
#media screen and (max-width: 769px) {
.shrink {
position: static;
}
}

image transition with javascript

Can anyone suggest a lightweight fading image transition for javascript or jquery. I'm thinking something along the lines of this:
document.getElementById("foo").src="images/robin.jpg";
where the html looks like this:
<img id="foo" src="images/batman.png"/>
The problem here is that the image doesn't fade, rather changes immediately. I can certainly stack and animate two images independently, but I'm trying to replace one image. Just makes for tidier code. Any advice is much appreciated. Thanks!
How about doing it with pure CSS3? Use transition, opacity and z-index which will get you this effect with smooth effect
Demo
CSS
div.wrap {
position: relative;
display: inline-block;
}
div.wrap img {
position: absolute;
}
div.wrap img:nth-of-type(1) {
opacity: 0;
transition: opacity 3s;
}
div.wrap:hover img:nth-of-type(1) {
z-index: 2;
opacity: 1;
}
div.wrap img:nth-of-type(2) {
opacity: 1;
transition: opacity 3s;
}
div.wrap:hover img:nth-of-type(2) {
opacity: 0;
}
Update 2 : Initially I used z-index but I don't think we require that too..
Demo 2 (Without z-index)

Categories