本文介绍如何通过 jquery 和 overhang.js 库，将用户在文本框中输入的内容动态显示为从页面顶部平滑下拉的提示通知栏，并附带完整可运行代码与样式优化建议。
要实现“输入文字 → 点击按钮 → 顶部下拉通知栏显示自定义消息（含用户输入）”的效果，原生 JavaScript 无法直接完成——需借助轻量级通知插件 overHang.js。该库专为创建美观、可配置的顶部/底部浮动通知而设计，支持动画、延迟关闭、自定义样式等特性。
✅ 正确实现步骤
-
引入必要依赖（按顺序）：
- jQuery（overHang.js 基于 jQuery）
- jQuery UI（部分动画效果依赖）
- overHang.js 核心 JS 与 CSS 文件（推荐使用 CDN）
-
HTML 结构保持简洁（复用你原有的表单结构）：
<article class="regular"> <h2>Textbox</h2> <label for="tbuser">Username:</label> <input type="text" id="tbuser" placeholder="Enter username" maxlength="10"> <input type="button" id="btn1" value="Click Me"> <p class="output" id="output1"></p> </article>
JavaScript 逻辑（关键改进点）：
- 使用 $("body").overhang({...}) 触发通知；
- 动态拼接 txt1.value 到 message 字段，实现“输入即显示”；
- 添加 clearTimeout 防止连续点击导致通知堆积；
- 设置 2000ms 延迟后触发（可根据需要调整或移除）；
const txt1 = document.getElementById('tbuser');
const btn1 = document.getElementById('btn1');
let intvl;
function fun1() {
clearTimeout(intvl);
intvl = setTimeout(() => {
$("body").overhang({
message: 'Thank you, ' + (txt1.value.trim() || 'guest') + '!',
type: "success",
duration: 3,
closeConfirm: false,
customClasses: "overhang"
});
}, 200);
}
btn1.addEventListener('click', fun1);? 提示：trim() 避免空格提交；|| 'guest' 提供默认值；duration: 3 表示通知自动关闭时间为 3 秒。
-
可选样式优化（CSS）：
.overhang { width: 80% !important; margin: 0 auto !important; border-radius: 6px !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }此样式让通知栏更居中、圆角且字体现代，!important 确保覆盖 overHang 默认样式。
⚠️ 注意事项
- jQuery 版本兼容性：overHang.js 推荐搭配 jQuery 3.x（如 3.3.1），避免使用 jQuery 4+ 或精简版（无 .animate() 支持）；
- CDN 链接有效性：文中提供的 jsDelivr CDN 地址已验证可用，若国内访问慢，可下载 overhang.min.js/.css 本地引用；
- 移动端适配：默认支持响应式，但建议在 <meta name="viewport"> 中启用缩放控制；
- 无障碍考虑：通知不包含 ARIA 属性，如需 WCAG 合规，可手动添加 role="alert" 及 aria-live="polite"（需修改 overHang 源码或 fork 定制）。
✅ 最终效果
点击按钮后，一条柔滑下拉的通知栏从屏幕顶部浮现，显示类似：
Thank you, Alice!
3 秒后自动淡出，体验接近主流 Web 应用（如 Slack、Notion 的操作反馈）。
通过以上整合，你不再局限于页面内 DOM 更新（如 innerHTML），而是真正实现了专业级用户交互反馈——简洁、直观、有质感。
