javascript - 如何在导航栏下创建一个粘性的号召性用语(点击后关闭)？

如何在导航栏下创建粘性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>

最佳答案

一种使用flexbox的方法。

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

.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>