javascript - 如何在导航栏下制作粘性 CTA，点击后关闭？

Question

我如何在导航栏下制作粘性 CTA，在点击 CTA 按钮或 X 时关闭。这可用于在您的网站上开展事件，或让用户了解正在进行的任何销售。

这就是我要找的:https://imgur.com/a/jLF0s

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}


.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

<div class="sticky" id="navbar">
  <a href="#">Home</a>
  <a href="#" >News</a>
  <a href="#">Contact</a>
</div>

Answer 1

一种使用 flexbox 的方法.

将菜单和 CTA 包装在 #navbar 中的单独容器中。然后将 flexbox 属性应用于两者。在此示例中，我已从 a 元素中删除了 float。

.menu,
.cta {
  display: flex;
}

#navbar a {
  display: inline-block;
  color: #f2f2f2;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

.menu {
  background-color: #333;
}

.cta {
  justify-content: center;
  align-items: center;
  background: red;
}

.cta button {
  margin-left: 1em;
  background: yellow;
  border: none;
  padding: .5em;
}

<div class="sticky" id="navbar">
  <div class="menu">
    <a href="#">Home</a>
    <a href="#">News</a>
    <a href="#">Contact</a>
  </div>
  <div class="cta">
    <p>Limited...</p>
    <button>Buy</button>
  </div>
</div>