Fade in/Fade out navigation bar - javascript

I'm trying to set my navigation bar to remain fixed and fade to 0.8 opacity when i scroll down and return to his normal position and opacity when i scroll back up.
my jquery code is :
jQuery(document).ready(function(){
var navOffset = jQuery("nav").offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if(scrollPos > navOffset) {
jQuery("nav").addClass("fixed");
jQuery("nav").fadeTo(1500,0.5);
} else {
jQuery("nav").removeClass("fixed");
jQuery("nav").fadeTo(1500,1);
}
});
});
and my css code is :
.fixed {
position:fixed;
top:0;
}
It fades out when i scroll down but doesnt return to his original opacity when i scroll back up.I'm new to jQuery.

I think the problem is that you're setting the fadeTo function on every firing of the scroll event. Thus, when you scroll down, you're adding many "fade out" calls to the animation effects queue. When you scroll back up, all of the "fade out" effects (each of which takes 1.5 seconds) have to finish before the first "fade in" call takes place.
You can fix this by adding a call to jQuery's .stop(true) so that each scroll event clears the animation queue:
jQuery(document).ready(function() {
var navOffset = jQuery("nav").offset().top;
jQuery(window).scroll(function() {
var scrollPos = jQuery(window).scrollTop();
jQuery("nav").stop(true);
if (scrollPos > navOffset) {
jQuery("nav").addClass("fixed");
jQuery("nav").fadeTo(1500, 0.5);
} else {
jQuery("nav").removeClass("fixed");
jQuery("nav").fadeTo(1500, 1.0);
}
});
});
body {
height: 4096px;
padding-top: 32px;
}
nav {
height: 128px;
width: 100%;
border: 1px solid black;
background-color: #00aa00;
}
.fixed {
position: fixed;
top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>so</title>
<meta charset="UTF-8">
</head>
<body>
<nav></nav>
</body>
</html>
Note that this means the fadeTo animation won't take place until the user stops scrolling.

It's there another solution to do that? Because when i scroll back up the time that it takes for the "fadeTo" action is verry delayed(~4 secconds) i dont think that's normal.

Related

jQuery fixed navbar that shrinks to a smaller size on scroll is being super buggy

When using a combination of jQuery and CSS to trigger my navbar to shrink on scroll, it get's buggy when you scroll back up to a certain position, I have linked a video as an example.
I have tried two different methods. The first is using $(window).scrollTop) with an if statement and a series of .addClass and .removeClass. The second thing I have tried is using $(window).scrollTop) with a series of .css dynamic style modifications. Both of these attempts render the same end result that is shown in this video https://youtu.be/YXKsrL1cghs .
My first jQuery attempt:
$(document).ready(function () {
$(window).on("scroll", function () {
if ($(window).scrollTop() >= 40) {
$(".navbar").removeClass("py-5");
$(".navbar").addClass("compressed");
} else {
$(".navbar").addClass("py-5");
$(".navbar").removeClass("compressed");
}
});
});
My second jQuery attempt:
$(document).ready(function () {
$(window).on("scroll", function () {
if ($(window).scrollTop() >= 40) {
$(".navbar").css({ "padding-top": "10px" });
$(".navbar").css({ "padding-bottom": "10px" });
} else {
$(".navbar").css({ "padding-top": "3rem" });
$(".navbar").css({ "padding-bottom": "3rem" });
}
});
});
My CSS:
.navbar.compressed {
padding-top: 10px;
padding-bottom: 10px;
}
My expected results would be a smooth scrolling fixed navbar that shrinks to a smaller size after scrolling beyond a certain point.
What actually occurs is that when you scroll down past a certain point, for 20px worth of height, it gets super buggy and starts bouncing up and down. Once you clear those 20 or so px it's perfectly fine, but when you scroll back up it acts the same within those 20px.
When watching the video, I noticed that your .navbar has transition: all .3s. It could be the reason that when you remove the class py-5 and add class compressed, it triggers the transition twice.
It would be helpful if you can provide the HTML markup and CSS as well.
The script is manipulating the DOM quite a lot. I am not sure if this is going to fix your problem but it might be a good idea to only change the classes if the have not yet been applied.
$(document).ready(function() {
$(window).on("scroll", function() {
let navbar = $(".navbar");
if ($(window).scrollTop() >= 40) {
if (navbar.hasClass("py-5")) {
navbar.removeClass("py-5");
navbar.addClass("compressed");
}
} else {
if (navbar.hasClass("compressed")) {
navbar.addClass("py-5");
navbar.removeClass("compressed");
}
}
});
});
body {
height: 10000px;
position: relative;
}
.navbar {
width: 100%;
position: fixed;
height: 50px;
top: 0;
transition: all .3s
}
.py-5 {
background-color: blue;
padding-top: 10px;
padding-bottom: 10px;
}
.compressed {
background-color: red;
padding-top: 0px;
padding-bottom: 0px;
}
<html>
<head></head>
<body>
<nav class="navbar py-5">Navigation</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

Header appearence not working when refreshing the page

Well, I have a very simple code, that do something like... when you are at the top of the page, #header have background-color:transparent;, and as you start scrolling down, it has static black color. It works great, but every time, when I refresh the page, the header has the black color instead of transparent.... I tried making the offset in scrolling from the top heigher, but still nothing. (when I refresh it, it has black color, as i scroll down, still black color, but as i scroll to the top again, right at the top it works, and i have the color transparent. [it starts working when i just move with the scroll button, but not from the beginning{landing} on the page])... there is my code:
js:
$(window).scroll(function () {
if ($(window).scrollTop() < 500) {
$('#header').css("background-color", "transparent");
}
else{
$('#header').css("background-color", "black");
}
});
css (for header)
#header {
background-color: black;
height: 75px;
width: 100%;
top:0px;
position: fixed;
z-index: 10;
}
html:
<div class="container">
<!--HEADER-->
<div id="header">
<div id="main">
<img src="images/my_logo.png">
</div>
<div id="menu">
<img name="menu" src="images/my_menu.png">
</div>
</div>
<!--/HEADER-->
At the moment you're only running the function when you scroll the page. You need to also run your function on the page load...
$(function(){
// Run it on page-loaded
setHeaderColour();
// Run it on scroll
$(window).scroll(setHeaderColour);
});
function setHeaderColour() {
if ($(window).scrollTop() < 500) {
$('#header').css("background-color", "transparent");
}
else{
$('#header').css("background-color", "black");
}
});
This is because the changes that you make on the client are not stored after a refresh, and the page is back to how it was before. This will make sure that after the refresh you set the colour correctly
As per the comment by #Quantiastical, this is probably better code, as it will cover more events and keeps your function in one place...
$(function(){
$(window).on('load scroll resize orientationchange', function () {
if ($(window).scrollTop() < 500) {
$('#header').css("background-color", "transparent");
}
else{
$('#header').css("background-color", "black");
}
});
});
Well, i found my solution, which is the best. Simply change the background color of the header in css to transparent, so... when the page loads itself, the header has no appearance, when i start scrolling, the event-handler starts and jQuery do its job :) easy as a pie
#header {
background-color: transparent;
height: 75px;
width: 100%;
top:0px;
position: fixed;
z-index: 10;
}

I need the contents of an iframe to expand like an animation and fill up the entire screen and shrink to it original size

I need the contents of an iframe which has height of 100px(displays only part of iframe) to expand like an animation on read more button click,and fill up the entire screen(expands in all directions), and on clicking close button positioned on top of it, it needs to animate and shrink to it original size.
I found a fiddle that dooes something similar
http://jsfiddle.net/FP2DZ/.
But my issue is that my div cannot be absolutely positioned as I have contents underneath that and that gets affected if I make this one absolutely positioned.
Absolutely positioning rest of the contents also does not seem to me like a good solution
Code
<html>
<head>
<script type="text/javascript">
var isFullscreen = false;
function fullscreen(){
//var d = document.getElementById('controls').style;
var d = {};
var speed = 900;
if(!isFullscreen){ // MAXIMIZATION
/*comment to have smooth transition from centre but loose covering the header*/
//document.getElementById('controls').style.position= "absolute";
d.width = "100%";
d.height="100%";
//d.left="0%";
d.top="0px";
//d.margin="0 0 0 0";
$("#header").animate({
height: 0
}, speed);
$("#controls2").animate(d,speed);
isFullscreen = true;
}else{ // MINIMIZATION
d.width="300px";
d.height="100px";
d.margin="0 auto";
d.position="relative";
//d.top="+=30px";
/* comment to have smooth minimze transition but not be placed below header */
// document.getElementById('controls').style.position= "relative";
$("#header").animate({
height: 30
}, speed);
$("#controls2").animate(d,speed);
isFullscreen = false;
}
}
</script>
<style>
* { margin: 0 }
#controls {
width:100%;
height:100%;
margin: 0 auto;
display:block;
position:absolute;
left: 50%;
z-index:5;
}
#controls2 {
overflow:visible;
width: 300px;
height: 100px;
position: relative;
left: -50%;
background-color: green;
z-index:10;
}
</style>
</head>
<body>
<h1 id="header" align=center> Header (To be covered on Fullscreen) </h1>
<div id='controls' style="" align="center">
<div id='controls2'>
<input type='button' value='fullscreen' onclick='fullscreen();' /><br>
I am some centered shrink-to-fit content! <br />
tum te tum
</div>
</div>
</body>
Probably the easiest way is to utilize the .animate({}) method in Jquery.
Check out this fiddle: http://jsfiddle.net/cm6v7bca/2/
$("#clickhere").on("click", function () {
$("#myframe").animate({
width: "200px",
height: "200px"
}, 1000);
});
.animate({}) allows you to change the css properties and then smoothly animates the changes onto the element. There are several different parameters you can pass. In the fiddle you'll see that I passed "1000" - that's the duration for the animation to complete in ms.
You can read more about the parameters and the method here: https://api.jquery.com/animate/
That really helps. But then the iframe needs to cover rest of the contents in the page and overlay them, Thats seems possible only if iframe is absolutely positioned. But there is so much dynamic content in the page, I do not want to absolute position the iframe.
http://jsfiddle.net/CvhkM/2833/
this is like what I want just that am not able to absolute position.
JS:
$(this).stop().animate({
left: parseInt(this.style.left)-100,
top: parseInt(this.style.top)-100,
width: parseInt(this.style.width)+200,
height: parseInt(this.style.height)+200
}, 300);

How do I make a hidden div ease out from the top instead of from the left using .show()?

I am trying to animate my navigation menu to bounce in from the top when it reaches a certain anchor point. I am currently using the .show()/.hide() to accomplish this, but it only eases in from the left. I tried to incorporate .animate() into it with no luck.
This is what I have so far:
var t = $("#about").offset().top;
$(window).scroll(function(){
if( $(document).scrollTop() >= t ) {
$('#global-nav').show(500, 'easeOutBounce');
} else {
$('#global-nav').hide(500, 'easeInExpo');
}
});
html {
height: 2000px;
}
#global-nav {
height:50px;
background:#000;
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
display: none;
}
#about{
margin-top:400px;
}
<div id="global-nav"></div>
<div id="about"></div>
I am using the jQuery Easing plugin and have the current code functional here, just scroll down to see it in action: http://jsfiddle.net/Hysteresis/0oazqj4y/30/
Is there an option for .show() to specify the ease in direction or do I need to incorporate the .animate() some how? I am fairly new to jQuery and have been working on this all day to no avail. Any help would be appreciated.
Try using .SlideDown() function in jQuery http://api.jquery.com/slidedown/
Try using slide() or its variants. Here's an example with slide down to show and slide up to hide:
$(window).scroll(function(){
if( $(document).scrollTop() >= t ) {
$('#global-nav').slideDown(500, 'easeOutBounce');
} else {
$('#global-nav').slideUp(500, 'easeInExpo');
}
});

Element visible only after 300px scrolled

i only know the basics on coding, and i've hit a dead end right here. Is there a simple code on how to make something visible only when scrolled after a few pixels?
You can see what i mean here http://cocorrinanewtemplate.blogspot.gr
the grey van bar that is fixed, should have a menu visible only when scrolled 300px (that's when the main menu is no longer visible)
You can try this.
HTML
CSS
.back-to-top {display: none; width: 30px; height: 30px; position: fixed; bottom: 20px; right: 20px; z-index: 500;}
JavaScript
$(function(){
$(window).scroll(function(e) {
if($(this).scrollTop()>150){
$('.back-to-top').fadeIn(1000); // Fading in the button on scroll after 150px
}
else{
$('.back-to-top').fadeOut(500); // Fading out the button on scroll if less than 150px
}
});
$('.back-to-top').click(function(e) {
$('body, html').animate({scrollTop:0}, 800);
});
});
You hase to use the jQuery function .scroll()
You will have to calculate where are you at in the scrolling proccess, and when you're at 300px from the top, do your logic.
I believe this script might work for you:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.classid').fadeIn();
} else {
$('.classid').fadeOut();
}
});
</script>
this is your problem on the blinking just remove this script and you will be fine:
<script type='text/javascript'>
$(function(){
$(window).scroll(function(e) {
if($(this).scrollTop()>200){
$('#menutest').fadeIn(1000); // Fading in the button on scroll after 150px
}
else{
$('#menutest').fadeOut(500); // Fading out the button on scroll if less than 150px
}
});
});
</script>

Categories