警报图标通知

Question

您知道吗，如何创建不使用固定位置显示在通知铃下的通知？如果可能的话，我希望有一些干净整洁的东西。非常感谢

const bell = document.querySelector("#bell");
const notifications = document.querySelector('#notifications');
const alertBtn = document.querySelector(".active-alert")


bell.addEventListener("click", () => {
  alertBtn.style.color =
    "white";
  notifications.innerHTML += `   <div class="member">
    <li>
      <span>Notifaction 1</span>
    </li>   </div>   <div class="member">
    <li>
      <span>Notifaction 2</span>
    </li>   </div>`;
});

.member {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: auto;
  text-align: center;
  background-color: darkgrey;
}

#notifications {
  position: fixed;
  width: 50%;
  top: 70px;
  right: 0px;
}

<header>
  <div class="header">
    <div class="logo">
      <h1>YourApp™</h1>
    </div>
    <div class="userProfile">
      <div class="bell">
        <img id="bell" src="icons/icon-bell.svg" alt="notifications" height="30" width="30" />
        <p class="active-alert">&#9679;</p>
        <ul id="notifications"></ul>
      </div>
      <div class="user">
        <img src="images/member-1.jpg" alt="Image of member 1" title="image_user_1">
        <p>Member 1</p>
      </div>
    </div>
  </div>
</header>

Answer 1

请参阅下文。更改记录在源代码中。希望这会有所帮助。

const bell = document.querySelector("#bell");
const notifications = document.querySelector('#notifications');
const alertBtn = document.querySelector(".active-alert")


bell.addEventListener("click", () => {
  /* alertBtn.style.color = "white"; Removed */
  
  /* Hide button */
  alertBtn.style.display = "none";
  
  notifications.innerHTML += `   <div class="member">
    <li>
      <span>Notifaction 1</span>
    </li>   </div>   <div class="member">
    <li>
      <span>Notifaction 2</span>
    </li>   </div>`;
});

.member {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: auto;
  text-align: center;
  background-color: darkgrey;
}

#notifications {
  /* position: fixed; Removed */
  width: 50%;
  /* top: 70px; Removed */
  /* right: 0px; Removed */
  padding: 0; /* Added */
  margin-top: 0 /* Added */
}

/* Added */
.bell {
  display: flex;
  flex-direction: column;
}

<header>
  <div class="header">
    <div class="logo">
      <h1>YourApp™</h1>
    </div>
    <div class="userProfile">
      <div class="bell">
        <img id="bell" src="icons/icon-bell.svg" alt="notifications" height="30" width="30" />
        <p class="active-alert">&#9679;</p>
        <ul id="notifications"></ul>
      </div>
      <div class="user">
        <img src="images/member-1.jpg" alt="Image of member 1" title="image_user_1">
        <p>Member 1</p>
      </div>
    </div>
  </div>
</header>