Hello Bar-like代码

Question

我想知道是否有一个教程或开源代码，我可以在屏幕顶部做一个jQuery栏，只在第一次有人访问我的网站时加载。 基本上就像www.hellobar.com

谢谢， 涉

Answer 1

我最后一个黑客攻击了一个很棒的弹出栏并发布了源代码：

http://blog.jobdeals.com/2011/12/free-hellobar-com-alternative-source-code/

就像HelloBar.com没有5美元/月的费用！在此处查看此操作：http://www.jobdeals.com/about/

Answer 2

不幸的是，Robstar的演示无法正常工作，所以我创建了一个完整的演示版，其中包含免费的源文件和完整的文档下载：http://haatch.com/WOAHbar

我也花时间将其用于移动设备！只需在到达目的地时调整浏览器窗口大小，或在移动设备上查看它即可！

我不赞成WOAHbar本身，这是100％Robstar的代码，我只是通过创建演示和完整文档使其更加可用。

我们应该真的赞成Robstar的帖子，即使演示不起作用，代码也完美无瑕。 Robstar，来找我：https://stackoverflow.com/users/1624499/haatch

Answer 3

jNotify插件将执行此操作：http://www.givainc.com/labs/jnotify_jquery_plugin.htm您需要自己连接cookie（或其他机制），仅显示一次。

Answer 4

“Hello Bar”只是一个滑动的HTML元素（即div）。

你可以通过使用jQuery的.slideUp()（看here）

来达到这个效果

对于“不再显示”部分，您必须使用Cookie。

Answer 5

对于仍然对此感兴趣的人，我制作了一个开源JavaScript插件，可以在这里找到：https://github.com/AnandChowdhary/hello-bar

这是捕获潜在客户，宣布销售或折扣等的好方法。它支持基于位置，引荐来源，A / B测试等的定位。使用简单：

从NPM安装Hello Bar：

yarn add hello-bar

初始化以显示文本：

import HelloBar from "hello-bar";

new HelloBar({
  text: "Hello, world!"
});

请访问存储库以获取更多高级代码示例，例如定位和号召性用语。