Solution 1 :

i restart everything from the beggining so somethings like ´shadow-box´ and the nav bar items is not centralized, and you need to make a ´div´and put a banner above the navbar but here is it

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {
  margin: 0;
  background-color: #f1f1f1;
  font-family: Arial, Helvetica, sans-serif;
}

#navbar {
  background-color: #585555;
  position: fixed;
  top: 165px;
  width: 100%;
  display: block;
  transition: top 0.5s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 16px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
}

#content{
    margin-top: 195px;
    color: black;
    font-family: Comic Sans MS, cursive, sans-serif;"
}

</style>
</head>
<body>

<div id="navbar">
    <a href="#home"> Home </a>
    <a href="#" id="deliveryLink"> Delivery </a>
    <a href="#" id="postLink"> Post </a>
    <a href="#" id="recepiesLink"> Recepies </a>
    <a href="#" id="contactLink"> Contact </a>
</div>
    <div id="content">
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
      </div>

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "165px";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}
</script>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div id="navbar">
    <a href="#home"> Home </a>
    <a href="#" id="deliveryLink"> Delivery </a>
    <a href="#" id="postLink"> Post </a>
    <a href="#" id="recepiesLink"> Recepies </a>
    <a href="#" id="contactLink"> Contact </a>
</div>
    <div id="content">
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
        <br> ////////////////////I copy paste a lot of this, i don't have content at the moment
      </div>

<script>
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "165px";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}
</script>

</body>
</html>

Solution 2 :

i looked at your program, i didnt try to introduce the js on your program, but, you could do that to fix what you want, i didnt understand to much what you want, what i understand i did

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "165px";
  } else {
    document.getElementById("navbar").style.top = "-30px";
  }
  prevScrollpos = currentScrollPos;
}

i dont know why i could but the program in the chat, but i did a snippet, but dont have nothing to run cause is just js, ahahahaha

Problem :

I’m trying to make a responsive navbar and header that hide with the scroll, but with animation so it looks smooth. When I scroll down it works perfectly, but when I scroll up they don’t reappear.

$(document).ready(function() {
  $(".content-container").scroll(function() {
    if ($(this).scrollTop() > 0) {
      $(".header").animate({
        top: '-165px'
      })
      $(".navbar").animate({
        top: '-165px'
      })
      $(".content-container").animate({
        marginTop: '30px'
      })
    } else if ($(this).scrollTop() === 0) {
      $(".header").animate({
        top: '0px'
      })
      $(".navbar").animate({
        top: '0px'
      })
      $(".content-container").animate({
        marginTop: '130px'
      })
    }
  });
});
body {
  margin: 0;
  background-repeat: no-repeat;
  background-size: cover;
}

.main-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.header {
  height: 165px;
  width: 100%;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #373536;
}
.navbar {
  width: 100%;
  position: fixed;
  background-color: #585555;
  height: 30px;
  display: flex;
  align-items: center;
  margin-top: 165px;
  box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.2), 0 3px 25px 0 rgba(0, 0, 0, 0.19);
  font-size: 16px;
  font-family: "Lato", Arial, Helvetica, sans-serif;
}

.navbar a {
  text-decoration-line: none;
  display: flex;
  height: 100%;
  width: 100%;
  color: white;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.content-container {
  height: 100%;
  margin-top: 195px;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  color: black;
  font-family: "Comic Sans MS", cursive, sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main-container">
  <div class="header">
    <div class="logo">
      <img src="somePath" alt="headerPicture" />
    </div>
  </div>
<div class="navbar">
  <a href="#" id="homeLink" class="active">
    <span>Home</span>
  </a>
  <a href="#" id="deliveryLink">
    <span>Delivery</span>
  </a>
  <a href="#" id="postLink">
    <span>Post</span>
  </a>
  <a href="#" id="recepiesLink">
    <span>Recepies</span>
  </a>
  <a href="#" id="contactLink">
    <span>Contact</span>
  </a>
</div>
<div class="content-container">
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
  a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
  <br> ////I copy paste a lot of this, i don't have content at the moment
</div>
</div>

but if I let pass some time it animates back down, perhaps it is something that I don’t know about animation with Jquery or something like that.

I also put a console.log("enters?") at the beginning of the else, and it prints it when I scroll up, but I have to wait for the elements to go down

Comments

Comment posted by manin

pls accept this comment if it solve your problem ! thx @Ricardo Sanchez Santos

Comment posted by Ricardo Sanchez Santos

that’s what i want to do, but if i copy paste that it doesn’t do anything in my code

Comment posted by manin

one of the main things i change was the

Comment posted by Ricardo Sanchez Santos

I want to animate the header and navbar when i scroll down the page so they move up to the page, and the other way around when i return to the top page

Comment posted by manin

but is that what i did, you need to improve that in your program, ill try to do it. when i finish i edit the all code here

By

Leave a Reply

Your email address will not be published. Required fields are marked *