本文介绍如何通过 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 控制等，详见 官方文档。
至此，点击按钮后，一条优雅的顶部下拉通知将滑入视野，清晰展示用户输入内容 —— 简洁、可靠、开箱即用。