Панель навигации и заголовок, который скрывается с помощью прокрутки - PullRequest
Новая
       0

Панель навигации и заголовок, который скрывается с помощью прокрутки

0 голосов
/ 27 мая 2020

Я пытаюсь сделать отзывчивую панель навигации и заголовок, которые скрываются с помощью прокрутки, но с анимацией, чтобы они выглядели плавно. Когда я прокручиваю вниз, он работает отлично, но когда я прокручиваю вверх, они больше не появляются. 

$(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>

но если я пропущу какое-то время, анимация вернется обратно вниз, возможно, это то, чего я не знаю об анимации с Jquery или что-то вроде этого.

Я также помещаю console.log("enters?") в начало else, и он печатает его, когда я прокручиваю вверх, но мне нужно ждать, пока элементы go вниз

Ответы [ 2 ]

1 голос
/ 27 мая 2020

Я перезапускаю все с самого начала, поэтому такие вещи, как «тень» и элементы панели навигации, не централизованы, и вам нужно сделать «деление» и разместить баннер над панелью навигации, но вот он 

<!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>
0 голосов
/ 27 мая 2020

Я посмотрел на вашу программу, я не пытался ввести js в вашу программу, но вы могли бы сделать это, чтобы исправить то, что вы хотите, я не очень понял, что вы хотите, что я понимаю, я сделал 

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;
}

Я не знаю, почему я мог, но программа в чате, но я сделал фрагмент, но мне нечего запускать, потому что просто js, ахахахаха

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...