本文介绍如何通过 jquery 和 overhang.js 库，将用户在文本框中输入的内容实时显示为从页面顶部滑落的通知栏，包含完整引入方式、事件绑定逻辑与样式定制方法。
要实现“输入文字 → 点击按钮 → 顶部下拉通知显示自定义内容”的效果，原生 JavaScript 无法直接完成该动效，需借助成熟的轻量级通知插件 —— overHang.js。它专为创建可配置、带动画的顶部/底部浮动通知而设计，支持消息内容、延迟、样式类等灵活控制。
✅ 正确实现步骤
1. 引入必要依赖（推荐 CDN）
需按顺序加载：jQuery → jQuery UI（overHang.js 依赖）→ overHang.js 核心 JS + CSS：
⚠️ 注意：jquery-ui.min.js 是必需的（即使只用基础功能），否则 overhang() 方法会报错。
2. HTML 结构（保持简洁）
复用你原有的表单结构，无需修改：
Textbox
3. JavaScript 逻辑（关键改进点）
- 使用 $("body").overhang({...}) 触发顶部下拉通知；
- 拼接用户输入值（如 "thank you " + txt1.value）；
- 添加 setTimeout 防抖（避免连续点击重复触发）；
- 使用 clearTimeout 确保仅执行最后一次点击请求：
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", // 可选：success / error / warn / info
duration: 3000,
customClasses: "overhang"
});
}, 200);
}
btn1.addEventListener('click', fun1);4. 自定义样式（可选）
通过 .overhang 类覆盖默认宽度与居中行为：
.overhang {
width: 80% !important;
margin: 0 auto !important;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}? 补充说明
- 若输入为空，建议用 txt1.value.trim() 做空值判断，避免显示 "Thank you, !"；
- type 参数可增强语义（如 error 显示红色背景），提升用户体验；
- overHang 支持更多高级选项：图标、按钮回调、多语言、Z-index 控制等，详见 官方文档。
至此，点击按钮后，一条优雅的顶部下拉通知将滑入视野，清晰展示用户输入内容 —— 简洁、可靠、开箱即用。
