如何在導航欄下製作粘性CTA，點擊時關閉？

Question

如何在導航欄下製作粘性CTA，在CTA按鈕或X中點擊時關閉。這可用於在您的網站上運行廣告系列，或讓用戶意識到任何正在進行的銷售。

這就是我要找：使用flexboxhttps://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

一種方法。

將菜單和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>