I just need some help with this small header of my project. I decided to include all the header files so you can run it in snippet and check for yourself what is happening. The only thing that I have having problem with is my JS file. If you run the file, you would get a menu bar and a shopping cart on top, I designed them to not open up at the same time hence the if else statements. Now the problem is after the web page loads, I cannot open the menu bar right away no matter how many times I click it. But, if I try to click the shopping cart, it would require two clicks before it drops down and works. But here's the weird part, after the shopping cart has dropped down, the menu bar would now work. After this occurrence, everything works the way they are intended to work. A little help please, I am currently stuck on this one. Thanks!
var showShoppingBtn = document.getElementById('shopping-cart');
var showShopping = document.getElementById('top-dropdown');
showShoppingBtn.addEventListener('click', ()=>{
if(showShopping.style.display == 'none' && showMenu.style.display == 'none'){
showShopping.style.display = 'block';
}
else if(showShopping.style.display == 'none' && showMenu.style.display == 'block'){
showMenu.style.display = 'none';
showShopping.style.display = 'block';
}
else {
showShopping.style.display = 'none';
}
});
var menuBtn = document.getElementById('menu-button');
var showMenu = document.getElementById('bottom-dropdown');
menuBtn.addEventListener('click', ()=>{
if(showMenu.style.display == 'none' && showShopping.style.display == 'none'){
showMenu.style.display = 'block';
} else if(showMenu.style.display == 'none' && showShopping.style.display == 'block'){
showShopping.style.display = 'none';
showMenu.style.display = 'block';
} else {
showMenu.style.display = 'none';
}
});
#import url("https://fonts.googleapis.com/css2?family=Montserrat:wght#400;700&display=swap");
body {
font-family: "Montserrat", sans-serif;
margin:0;
padding: 0;
}
.top-content{
background: orange;
display: flex;
}
.shopping-menu{
width: 100%;
}
#shopping-cart{
font-size: 2.5em;
cursor: pointer;
padding-right: 0;
float: right;
margin-right: 1em;
}
.top ul{
margin-top: 3em;
list-style: none;
margin-right: 1em;
}
.top li{
padding-right: 1.2em;
margin-bottom: .5em;
text-align: right;
text-transform: uppercase;
}
.top-content-container{
width: 100%;
}
.top-dropdown{
display: none;
}
.site-logo img{
position: absolute;
width: 100vw;
display: none;
}
.bottom{
background-color:#0e1338;
color: white;
display: flex;
position: relative;
}
.menu{
padding-right: 1em;
width: 100%;
}
.menu-button{
float: right;
cursor: pointer;
padding-right: 1em;
}
.bottom-content-container{
margin-left: auto;
margin-right: 0;
text-align: right;
padding-right: 1em;
}
.bottom-content-container ul{
list-style: none;
}
.menu-bar{
width: 3em;
height: .5em;
background-color: white;
margin: .5em 0;
}
.bottom-dropdown{
display: none;
margin-top: 4em;
text-align: right;
}
.bottom-dropdown li{
margin: .7em 0;
text-transform: uppercase;
}
.top li a{
color: black;
text-decoration: none;
}
.bottom li a{
text-decoration: none;
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="styles/header.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
/>
</head>
<body>
<section class="top">
<div class="top-content">
<nav class="shopping-menu">
<i class="fa fa-shopping-cart" id="shopping-cart"></i>
<div class="top-content-container">
<div class="top-dropdown" id="top-dropdown">
<ul>
<li>Cart</li>
<li>Checkout</li>
<li>My Purchases</li>
</ul>
</div>
</nav>
</div>
</div>
</section>
<section class="bottom">
<div class="site-logo">
<img src="images/AutoNation-logo.png" alt="AutoNation Logo">
</div>
<nav class="menu">
<div class="menu-button" id="menu-button">
<div class="menu-bar"></div>
<div class="menu-bar"></div>
<div class="menu-bar"></div>
</div>
<div class="bottom-content-container">
<ul>
<div class="bottom-dropdown" id="bottom-dropdown">
<li>Services</li>
<li>Special Offers</li>
<li>Browse</li>
<li>Contact</li>
<li>Location</li>
<li>My Account</li>
</div>
</ul>
</nav>
</div>
</section>
<script src="scripts/header.js"></script>
</body>
</html>
It's because first time you entered the click function both style.display are not filled. so the condition
showShopping.style.display == 'none' && showMenu.style.display == 'none'
will not be evaluate
one quick solution to use your code is to initialize style.display at the end of the js part
showShopping.style.display = 'none';
showMenu.style.display = 'none'
When you do element.style.someStyle, you access only the inline style of the element. So the first time you click on showShoppingBtn it will pass in the last else -> setting the inline style of it to display: none.
A quick fix to that would be to add inline style directly in the html. like so :
<div class="top-dropdown" id="top-dropdown" style="display: <The defautl display you want>;">
And
<i class="fa fa-shopping-cart" id="shopping-cart" style="display: <The default display you want>;"></i>
Your HTML is invalid
You really should toggle a class. Add class hide to the menus and have .hide {display:none}
Then you can do
showShoppingBtn.addEventListener('click', () => {
showMenu.classList.add("hide")
showShopping.classList.toggle("hide")
});
menuBtn.addEventListener('click', () => {
showShopping.classList.add("hide")
showMenu.classList.toggle("hide")
});
Related
Using Javascript to open and close a navbar but it's not working in my new project
When i use devtools i can see the function active but my nav bar does not open or close. So funny because i've used it for an old project which is working fine. I have no idea why this time it's frustrating. I need your help please if any
This is the js code
let Menupopupup = document.getElementById("dropdownheadernav");
function opendropdownheadernav() {
Menupopupup.classList.add("Openmenudrops");
document.body.style.overflow = "hidden";
}
function closedropdownheadernav() {
Menupopupup.classList.remove("Openmenudrops");
document.body.style.overflow = "auto";
}
This is my HTML
<nav class="firstnavigationbar">
<button id="Showscroll" type="submit" class="barsbutton" onclick="opendropdownheadernav()">
<div class="barbtnimagecontainer" >
<img class="barbtn"
src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
height="23"
width="22"
alt=""
/></div></button>
<ul class="firstunorderedlist" id="dropdownheadernav">
<button id="Closescroll" type="button" class="closemenubutton" onclick="closedropdownheadernav()"><span class="closemenuspan">✕</span></button>
This is my Css
.firstunorderedlist {
margin-top: -40px;
display: none;
color: #1e2329;
list-style: none;
line-height: 3.5;
background-color: #fff;
width: 320px;
overflow: hidden;
}
The element UL must be closed with /ul. As for javascript, you need to find the element by id and then use style.display and make it equal to the desired value. I attached the neatified code below. It does what you need and is made shorter.
<!DOCTYPE html>
<html>
<head>
<style>
.firstunorderedlist {
margin-top: -40px;
display: none;
color: #1e2329;
list-style: none;
line-height: 3.5;
background-color: #fff;
width: 320px;
overflow: hidden;
}
</style>
</head>
<body>
<nav class="firstnavigationbar">
<button id="Showscroll" type="submit" class="barsbutton" onclick="openNav()">
<div class="barbtnimagecontainer" >
<img class="barbtn"
src="./B-NFT-IMGS/Screenshot 2022-11-29 at 07.00.30.png"
height="23"
width="22"
alt="">
</div>
</button>
<ul class="firstunorderedlist" id="dropdownheadernav">
<li>Code</li>
<li>Goes</li>
<li>Here</li>
</ul>
<button id="Closescroll" type="button" class="closemenubutton" onclick="openNav()">
<span class="closemenuspan">✕</span>
</button>
<script>
let navOpened = false;
function openNav() {
if (navOpened) {
navOpened = false;
document.getElementById("dropdownheadernav").style.display = 'none';
} else {
navOpened = true;
document.getElementById("dropdownheadernav").style.display = 'initial';
}
}
</script>
</body>
</html>
function myFunction() {
var x = document.getElementById("myLinks");
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
.mobile-container {
max-width: 480px;
margin: auto;
background-color: blue;
height: 500px;
color: white;
border-radius: 10px;
}
.topnav {
overflow: hidden;
background-color: red;
position: relative;
}
.topnav #myLinks {
display: none;
}
.topnav a {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}
.topnav a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #04AA6D;
color: white;
}
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<body>
<div class="mobile-container">
<div class="topnav">
Navbar
<div id="myLinks">
News
Contact
About
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h3>Vertical Mobile Navbar</h3>
<p>This example demonstrates how a navigation menu on a mobile/smart phone could look like.</p>
<p>Click on the hamburger menu (three bars) in the top right corner, to toggle the menu.</p>
</div>
</div>
</body>
<html>
I have a inline element. I am trying to hide and show it using button. But when I click document.getElementById('').style.display = 'inline'; I'm getting block elements. How to get the element inline as it was set before.
my code looks like;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#mydata{
display:none;
font-size: 25;
}
.chartCard {
width: 100vw;
height: calc(90vh - 100px);
background: rgb(133, 43, 43);
display: flex;
align-items: center;
justify-content: center;
}
.chartBox {
width: 650px;
padding: 8px;
border-radius: 20px;
margin: 1px 22px;
border: solid 3px rgba(255, 26, 104, 1);
background: white;
}
.button:hover{
background-color: #005201;
color: rgb(255, 253, 250);;
}
.button {
background-color: rgb(69, 9, 188);
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 2px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
</style>
<script>
function changedata(parameter){
if(parameter==0){
document.getElementById('myreport').style.display = 'none';
document.getElementById('mydata').style.display = 'block';
}
else{
document.getElementById('mydata').style.display = 'none';
document.getElementById('myreport').style.display = 'inline';
}
}
</script>
</head>
<body>
<button class="button" onclick="changedata(1)">Myreport</button>
<button class="button" onclick="changedata(0)">Mydata</button>
<div id="mydata">
<h1>This is my Report</h1>
</div>
<div class="chartCard" id="myreport">
<div class="chartBox">
<p>Ram</p>
</div>
<div class="chartBox">
<p>Shyam</p>
</div>
</div>
</body>
</html>
So, as you can see as I click button, inline element are getting converted to block element. how to resolve it. looking for your help. Thanks in advance
Update your function to set display to flex for myreport, initially you have set display:flex for .chartCard
function changedata(parameter) {
if (parameter == 0) {
document.getElementById('myreport').style.display = 'none';
document.getElementById('mydata').style.display = 'block';
} else {
document.getElementById('mydata').style.display = 'none';
document.getElementById('myreport').style.display = 'flex';
}
}
fiddle here: https://jsfiddle.net/fhps08re/
You are using display:flex so you have to set it back.
Also, you don't need js to hide or show your sections, you can use :target.
.menu{
display:flex;
}
a{
margin-right:20px;
}
.section{
padding:20px;
width:fit-content;
border: 1px solid black;
display:none;
}
.section:target{
display:block;
}
<div class="menu">
go to A
go to B
go to C
</div>
<br>
<div id="a" class="section">Section A</div>
<div id="b" class="section">Section B</div>
<div id="c" class="section">Section C</div>
when you click on button, your 'myreport' element get display: 'inline'. it's work correct. because your elements with 'chartBox' class is div and div has display: block in its default css, the elements shows in two line.
use this to correct :
when you click the button, instead of set display to inline, set display to flex. as you do this in your css.
function changedata(parameter){
if(parameter==0){
document.getElementById('myreport').style.display = 'none';
document.getElementById('mydata').style.display = 'block';
}
else{
document.getElementById('mydata').style.display = 'none';
document.getElementById('myreport').style.display = 'flex';
}
}
or you can use span instead of div with class: 'chartBox'
My code shows and hides divs depending on which button the user clicks, implemented by simple myElement.style.display = 'none'; statements.
Can transitions be used when these divs are shown/hidden? I.e. when button-1 is clicked, text relating to button-1 fades into view; when button-2 is clicked, text relating to button-2 fades into view as the previous button-1 text fades out?
As is, the divs snap in and out of view. I am looking for a smoother transition.
I have attempted it with the code which is shown commented out. It just doesn't work. Any tips are much appreciated, thank you.
JS
var visibleDivId = null;
function divVisibility(divId) {
if(visibleDivId === divId) {
visibleDivId = null;
} else {
visibleDivId = divId;
}
hideNonVisibleDivs();
}
function hideNonVisibleDivs() {
var i, divId, div;
for(i = 0; i < divs.length; i++) {
divId = divs[i];
respoding_div = document.getElementById(divId);
if(visibleDivId == divId) {
respoding_div.style.display = 'block';
// respoding_div.style.transition = 'display 0.3s ease-in block'
}
else {
respoding_div.style.display = 'none';
// respoding_div.style.transition = 'display 0.3s ease-in none'
}
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container" style="text-align:center; margin:0 auto;">
<div class="card-container" style="margin:0 auto; width:50%; display: flex; align-items: center; justify-content: center; padding-bottom:10px;">
<div class='accordion' onclick="divVisibility('Core1');">
<img src='https://img.icons8.com/dotty/2x/external-link-squared.png' width="50px">Button-1
</div>
<div class='accordion' onclick="divVisibility('Core2');">
<img src='https://img.icons8.com/dotty/2x/globe-earth.png' width="50px">Button-2
</div>
<div class='accordion' onclick="divVisibility('Core3');">
<img src='https://img.icons8.com/dotty/2x/torrent.png' width="50px">Button-3
</div>
</div>
<div class="all_divs">
<div id="Core1" class="subdiv" style="display:none;">TEXT #1</div>
<div id="Core2" class="subdiv" style="display:none;">TEXT #2</div>
<div id="Core3" class="subdiv" style="display:none;">TEXT #3</div>
</div>
</div>
</div>
</body>
</html>
CSS
body{
font-family: "IBM Plex Sans", sans-serif;
}
.accordion {
cursor: pointer;
border: none;
text-align: center;
outline: none;
font-size: 15px;
padding-left:100px;
padding-right:100px;
padding-top: 20px;
width: 80px;
}
.accordion:hover {
opacity: 0.7;
}
.accordion img {
width: 50px;
margin: 0 auto;
}
.all_divs > div {
color: #232f3e;
width: 95%;
text-align: center;
background-color:#fafafa;
position: absolute;
padding:2%;
border-top: 2px solid #e6e7e8;
}
h1{
font-weight: lighter;
color: #232f3e;
}
td{
padding: 2%;
}
it will not work not because of the syntax or something wrong in JS but because of the display property can't be transitioned from state to another. u can use opacity for that.
This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I am pretty new to this game, and I am trying to make a website, using new tricks as i go along.
I am coding a set of buttons to instead of going to another page, pop-up (Modal i think its called?)
it works well when i have all the script in HTML but will not work for me when I put the code externally.
ONLY WORKING ON THE ABOUT BUTTON CURRENTLY
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(){
modal.style.display = "block";}
span.onclick = function (){
modal.style.display = "none";}
window.onclick = function (event){
if(event.target === modal) {
modal.style.display = "none";}}
*
{
margin: 0;
padding: 0;
}
header
{
background-image: url("../images/webBack.jpg");
background-color: powderblue;
height: 100vh;
background-size: cover;
background-position: center;
}
a{
color: black;
}
a:hover{
color:white;
transition-duration: 0.3s;
}
.row{
position: center;
max-width: 95%;
margin: auto;
}
.logo img{
width: 150px;
height: auto;
float: left;
}
.main-nav{
float:right;
list-style:none;
margin-top: 30px;
}
.main-nav li{
display: inline-block;
}
.button1 {
background-color: cornflowerblue;
opacity: 0.2;
font-size: 16px;
text-align: center;
padding: 14px 28px;
border: 2px solid black;
transition-duration: 0.2s;
cursor: pointer;
}
.button1:hover{
background-color: cornflowerblue;
color: white;
opacity: 1;
font-size: 18px;
}
.modal{
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content{
background-color: aliceblue;
margin-top: 150px;
margin-left: 25%;
padding: 20px;
border: 2px solid whitesmoke;
width: 50%;
height: 50%;
overflow: auto;
}
.close{
color: gray;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
body{
font-family: monospace;
}
.Hero{
position: absolute;
margin: 500px;
margin-left: 25%;
margin-top: 0;
pointer-events:none;
}
h1{
color:white;
text-transform: uppercase;
font-size: 60px;
text-align: center;
margin-top: 275px;
}
p{
color: black;
font-size: 16px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portia Dance Sports Therapy</title>
<link rel="stylesheet" href="scripts/Portia.css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="images/Logo.png">
</div>
<script src="scripts/main.js"></script>
<ul class="main-nav">
<li><button class = button1>Home</button></li>
<li><button id="about" class = button1>About</button></li>
<li><button class = button1> What is? </button></li>
<li><button class = button1> Contact </button></li>
<li><button class = button1> FAQ </button></li>
</ul>
</div>
<div class="Hero">
<h1>Portia Sports Therapy</h1>
</div>
</header>
<div id="aboutMod" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
so that makes me shit hot at this therapy business! <br>
So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
</div>
</div>
</body>
</html>
in the snippet it works...
I am using IntelliJ
maybe something in the HTML?
I can't figure it out.
You are referencing your script before the elements exist. Just reference the script after they exist. Try putting your script tag above your end body tag. I tested with your code and this does the job.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Portia Dance Sports Therapy</title>
<link rel="stylesheet" href="scripts/Portia.css">
</head>
<body>
<header>
<div class="row">
<div class="logo">
<img src="images/Logo.png">
</div>
<ul class="main-nav">
<li><button class = button1>Home</button></li>
<li><button id="about" class = button1>About</button></li>
<li><button class = button1> What is? </button></li>
<li><button class = button1> Contact </button></li>
<li><button class = button1> FAQ </button></li>
</ul>
</div>
<div class="Hero">
<h1>Portia Sports Therapy</h1>
</div>
</header>
<div id="aboutMod" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>Hi! I am Portia Dance! I am a Sports Therapist, been at the game for about 30 years!! <br>
so that makes me shit hot at this therapy business! <br>
So make sure you book an appointment with me and together we can make you feeling 10 years younger!</p>
</div>
</div>
<script src="scripts/main.js"></script>
</body>
</html>
Alternatively, you can tell your JS to execute after the page is ready if you want to leave the script tag where it is. Although this code below may not be completely cross browser compatible, you can also do it with Jquery instead of pure javascript which should defintely be cross browser compatible.
function r(f){/in/.test(document.readyState)?setTimeout('r('+f+')',9):f()}
r(function(){
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(){
modal.style.display = "block";}
span.onclick = function (){
modal.style.display = "none";}
window.onclick = function (event){
if(event.target === modal) {
modal.style.display = "none";}}
});
If you decide to include Jquery in your HTML then you can do this.
$( document ).ready(function() {
var modal = document.getElementById("aboutMod");
var btn = document.getElementById("about");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function(){
modal.style.display = "block";}
span.onclick = function (){
modal.style.display = "none";}
window.onclick = function (event){
if(event.target === modal) {
modal.style.display = "none";}}
});
If you want to try the jquery solution just put this in between your head tags.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
I'm trying to hide the h1 when the scroll is greater than 850, but when it goes below 850 also hides the nav.
If I hide the nav without hiding the h1, then it doesn't return with the fadeIn ()
I don't understand why the nav is hidden, if I ask you to just hide the id '#marca'.
HTML and CSS
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style media="screen">
.header {
position: fixed;
margin-top: -23px;
width: 100%;
height: 70px;
}
.marca{
display: block;
}
h1{
text-align: center;
padding-top: 15px;
margin-bottom: 0;
}
h1 a{
text-decoration: none;
color: black;
}
.vacio{
height: 3000px;
}
/* MENU HEADER */
.menu-negro,
.menu-blanco{
margin-top: -35px;
/* display: flex;
justify-content: flex-end; */
float: right;
}
.menu-negro a,
.menu-blanco a,
.menu-negro img,
.menu-blanco img{
margin-right: 10px;
}
.menu-blanco{
display: none;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../js/proba.js" charset="utf-8"></script>
</head>
<body>
<header class="header">
<h1 id="marca">Marca</h1>
<nav id="menu-negro" class="menu-negro">
<a id="btn-carro" href="#"><img src="../logos/carro32pxnegro.png" alt=""></a>
<a id="btn-usuario" href="#"><img src="../logos/usuario32pxnegro.png" alt=""></a>
</nav>
<nav id="menu-blanco" class="menu-blanco">
<a id="btn-carro" href="#"><img src="../logos/carro32pxnegro.png" alt=""></a>
<a id="btn-usuario" href="#"><img src="../logos/usuario32pxnegro.png" alt=""></a>
</nav>
</header>
<div class="vacio">
</div>
</body>
</html>
This is my jquery code.
$(document).ready(function(){
marca = $('#marca')
menuNegro = $('#menu-negro')
$(window).scroll(function(){
window_y = $(window).scrollTop()
scroll_critical = 850
if(window_y > scroll_critical && marca.css('display') == "block"){
marca.fadeOut()
}
if(window_y < scroll_critical && marca.css('display') == "none"){
marca.fadeIn()
}
})
})
The problem is not that the fadeOut is hidding the entire nav, but this
when the h1 marca is hidden, the menu-negro stop floating to him, and start floating to the parent element, so it just goes up because 2 things, the header has a margin-top: -23px; and the menus have a margin-top: -35px;, what you could do is to add a class to change the margin of the nav like
$(document).ready(function(){
marca = $('#marca')
menuNegro = $('#menu-negro')
$(window).scroll(function(){
window_y = $(window).scrollTop()
scroll_critical = 850
if(window_y > scroll_critical && marca.css('display') == "block"){
$('.menu-negro').addClass('no-margin-top');
marca.fadeOut()
}
if(window_y < scroll_critical && marca.css('display') == "none"){
$('.menu-negro').removeClass('no-margin-top');
marca.fadeIn()
}
})
})
and in the css just add
.menu-negro.no-margin-top {
margin-top: 23px;
}