求助：实现从页面顶部下拉通知栏展示文本框输入内容

现有代码问题分析 #

你当前的代码仅将输入内容渲染到页面内的<p>元素，没有实现顶部滑入的通知栏效果。我们需要新增通知栏DOM结构、CSS动画逻辑，同时修改JS事件处理逻辑来完成需求。

完整实现代码 #

<!-- HTML结构 -->
<input type="text" id="inputText" placeholder="输入内容">
<button onclick="showNotification()">提交</button>
<p id="display"></p>

<!-- 顶部通知栏 -->
<div id="topNotification" class="notification-hidden">
  <span id="notificationContent"></span>
  <button onclick="hideNotification()" class="close-btn">×</button>
</div>

<style>
/* 通知栏基础样式 */
#topNotification {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 12px 20px;
  background-color: #2c3e50;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: transform 0.3s ease;
  z-index: 9999;
}

/* 通知栏隐藏状态 */
.notification-hidden {
  transform: translateY(-100%);
}

/* 通知栏显示状态 */
.notification-shown {
  transform: translateY(0);
}

/* 关闭按钮样式 */
.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 20px;
  cursor: pointer;
  padding: 0 10px;
}

/* 可选：避免通知栏遮挡页面顶部内容 */
body {
  padding-top: 40px;
}
</style>

<script>
let notificationTimer;

function showNotification() {
  const inputVal = document.getElementById('inputText').value.trim();
  if (!inputVal) {
    alert('请输入内容');
    return;
  }
  
  // 填充通知内容（替换成你需要的固定文本格式）
  const contentEl = document.getElementById('notificationContent');
  contentEl.textContent = `固定提示文本：${inputVal}`;
  
  // 切换通知栏显示状态
  const notificationEl = document.getElementById('topNotification');
  notificationEl.classList.remove('notification-hidden');
  notificationEl.classList.add('notification-shown');
  
  // 自动关闭通知（3秒后），避免重复点击产生多个定时器
  clearTimeout(notificationTimer);
  notificationTimer = setTimeout(hideNotification, 3000);
  
  // 保留原有p元素显示逻辑（可选）
  document.getElementById('display').textContent = `你输入的内容：${inputVal}`;
}

function hideNotification() {
  const notificationEl = document.getElementById('topNotification');
  notificationEl.classList.remove('notification-shown');
  notificationEl.classList.add('notification-hidden');
}
</script>

关键实现要点 #

• 通知栏定位：使用position: fixed固定在页面顶部，设置z-index: 9999确保不会被其他元素遮挡
• 平滑动画：通过CSS transition 和 transform: translateY() 实现下拉/收起的平滑过渡效果
• 状态切换：通过添加/移除CSS类来控制通知栏的显示与隐藏，避免直接操作样式属性
• 自动关闭：使用setTimeout实现通知栏自动收起，同时用clearTimeout清除旧定时器，避免重复点击导致的逻辑混乱
• 输入校验：添加空值判断，避免显示空内容的通知

内容的提问来源于stack exchange，提问作者maria