Блог

Главная - Вопросы по программированию - Почему мой ответ Ajax отображается на панели навигации?

Почему мой ответ Ajax отображается на панели навигации?

#html #jquery #css #ajax #navbar

Вопрос:

Всякий раз, когда я прокручиваю мышь, все перечисленные карточки администратора появляются на панели навигации. Это очень раздражающий недостаток, и я, кажется, не могу понять, где я ошибся. Любая помощь будет признательна. Спасибо!

 #mainsec {
  height: 100vh;
  width: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#navv {
  background-color: #333; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: 0; /* Stay on top */
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
}

#navv a:hover {
  background-color: rgba(221, 221, 221, 0.568);
  color: black;
} 
 <!DOCTYPE html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />
  <link rel="stylesheet" type="text/css" href="../../css/admin_dash.css">

  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navv">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <img src="../../assets/logo.png" alt="" width="30" height="24" class="d-inline-block align-text-top"> Phemesoft
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#sec1">Admins</a>
          <a class="nav-link" href="#sec2">Manage Admins</a>
          <a class="nav-link" href="#sec3">Course Content</a>
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </div>
      </div>
    </div>
  </nav>
  <div class="container">
    <div class="column">
      <div id="sec1">
        <div class="row" id="mainsec">
          <div class="col-sm-6">
            <h2>Admins</h2>
          </div>
          <div class="col-sm-6">
            <div class="row">
              <div class="col-sm-5 cards-wrapper"></div>
            </div>
          </div>
        </div>
      </div>
      <div id="sec2">
        <div class="row" id="mainsec">
          <div class="col-sm-6">
            <h1>User to Admin</h1>
          </div>
          <div class="col-sm-6">
            <form class="form" action="makeadmin" method="POST">
              Enter email:
              <input type="email" placeholder="Email" name="email">
              <button type="submit" class="btn btn-light">Check</button>
            </form>
          </div>
        </div>
      </div>
      <div id="sec3">
        <div class="col-sm-6" id="mainsec">
          <h1>Add course content</h1>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    $.ajax({
      url: "listadmins",
      type: "GET",
      success: function(response) {
        var $results = $(".cards-wrapper");
        for (var a = 0; a < response.length; a  ) {
          // console.log(response[a].Name);
          $results.append(
            '<div class="card"><div class="card-body"><h6 class="card-title">'  
            response[a].Name  
            '</h6></div></div>'
          );
        }
      }
    });
  </script>
  <script>
    var prevScrollpos = window.pageYOffset;
    window.onscroll = function() {
      var currentScrollPos = window.pageYOffset;
      if (prevScrollpos > currentScrollPos) {
        document.getElementById("navv").style.top = "0";
      } else {
        document.getElementById("navv").style.top = "-50px";
      }
      prevScrollpos = currentScrollPos;
    };
  </script>
  </body>
</html>

Вот изображение проблемы:
Карта появится над навигационной панелью

Ps: Я не опубликовал сопоставление /listadmins, потому что это обычный запрос к базе данных

Комментарии:

1. Тот факт, что это ответ ajax, не имеет отношения к вашей проблеме. (это просто проблема html/css)

2. используйте более высокий z-индекс в навигаторе.

3. @дезинфекция некоторые вещи не закрыты/дополнительные, но это не относится к div или nav, которые вы указываете

4. @MarkSchultheiss да! Я совершенно упустил открывающий элемент.

Ответ №1:

Спасибо всем ребятам за то, что откликнулись. Я нашел ответ в одном из комментариев. Это должно было использовать более высокое значение z-индекса для навигационной панели.

 #navv {
  background-color: #333; /* Black background color */
  position: fixed; /* Make it stick/fixed */
  top: 0; /* Stay on top */
  width: 100%; /* Full width */
  transition: top 0.3s; /* Transition effect when sliding down (and up) */
  z-index: 2;
}

Комментарии:

1. это, вероятно, означает, что ваш документ не течет должным образом ИМХО

Ответ №2:

удалите «положение: относительно» из класса карт

введите описание изображения здесь

Ответ №3:

Это не имеет никакого отношения непосредственно к ajax, но больше к остальной части страницы.

Ваш html-код недействителен

  • метка на голове не закрыта
  • бирка тела не открыта
  • дубликат идентификатора mainsec — на самом деле я их не использовал, поэтому я сделал их классом и удалил идентификаторы
  • какая-то другая недопустимая разметка

Трудно увидеть проблему здесь, поэтому я немного изменил размер для этого сайта

Теперь, когда мы получили этот пролив, вы можете регулировать поля и отступы на вершинах, mt-5 pt-4 как вам заблагорассудится, поиграйте с этим и посмотрите, куда вам нужно двигаться.

 .mainsec {
  height: 5em;
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#navv {
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
  transition: top 0.3s;
}

#navv a:hover {
  background-color: rgba(221, 221, 221, 0.568);
  color: black;
} 
 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous" />
  <link rel="stylesheet" type="text/css" href="../../css/admin_dash.css">
</head>

<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark" id="navv">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">
        <img src="../../assets/logo.png" width="30" height="24" class="d-inline-block align-text-top" alt="Phemesoft logo">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
      <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div class="navbar-nav">
          <a class="nav-link active" aria-current="page" href="#sec1">Admins</a>
          <a class="nav-link" href="#sec2">Manage Admins</a>
          <a class="nav-link" href="#sec3">Course Content</a>
          <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
        </div>
      </div>
    </div>
  </nav>
  <div class="container mt-6">
    <div class="">
      <div id="sec1">
        <div class="mainsec mt-5">
          <div class="col-sm-3">
            <h2>Admins</h2>
          </div>
          <div class="col-sm-7 mt-5 pt-4">
            <div class="row">
              <div class="col-sm-8 cards-wrapper">
                <div class="cards-wrapper">
                  <div class="card">
                    <div class="card-body">
                      <h6 class="card-title">Pretend append
                      </h6>
                    </div>
                  </div>
                  <div class="card">
                    <div class="card-body">
                      <h6 class="card-title">Pretend append
                      </h6>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row" id="sec2">
        <div class="row mainsec">
          <div class="col-sm-6">
            <h1>User to Admin</h1>
          </div>
          <div class="col-sm-6">
            <form class="form" action="makeadmin" method="POST">
              Enter email:
              <input type="email" placeholder="Email" name="email">
              <button type="submit" class="btn btn-light">Check</button>
            </form>
          </div>
        </div>
      </div>
      <div class="row"  id="sec3">
        <div class="col-sm-6 mainsec">
          <h1>Add course content</h1>
        </div>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script>
    $.ajax({
      url: "listadmins",
      type: "GET",
      success: function(response) {
        var $results = $(".cards-wrapper");
        for (var a = 0; a < response.length; a  ) {
          $results.append(
            '<div class="card"><div class="card-body"><h6 class="card-title">'  
            response[a].Name  
            '</h6></div></div>'
          );
        }
      }
    });

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

</html>

Комментарии:

1. Эй, да, я совсем забыл теги, но я использую mainsec, чтобы разделить его на разделы. Например, когда вы нажимаете на навигационную панель, она прокручивается вниз до новой страницы, и mainsec предоставляет высоту и ширину, чтобы соответствовать одному контенту на экране.

Метки: