如何为促销创建粘性标题通知?

Question

我想创建一个粘性通知，如果用户想要关闭，可以关闭该通知。

到目前为止，我已经实现了：

.top-head {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
background: #FFFFFF;
width: 100%;
float: left;
height: 50px;
padding: 10px;
}
.header {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 1030;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
background: #FFFFFF;
height:50px;
padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="top-head fixed-top">
<span>Get $5 off when you spend $10. Enter FIVEOFF at checkout.</span>
<span class="float-right">x</span>
</div>
<div class="header">
Logo
</div>

更新：我还添加了标题，以便进一步解决问题。

Answer 1

你可以用这种方式。

例如：

$(document).click('.top-head float-right', function() {
$(".top-head > span").addClass('remove');
});

.top-head {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
background: #FFFFFF;
width: 100%;
float: left;
height: 50px;
padding: 10px;
}
.top-head span.remove {
display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="top-head fixed-top">
<span>Get $5 off when you spend $10. Enter FIVEOFF at checkout.</span>
<span class="float-right">x</span>
</div>

Answer 2

您可以使用 boostrap 警报以及包含关闭图标的按钮：

#tophead {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
background: #FFFFFF;
height: 50px;
padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div id="tophead" class="alert alert-success alert-dismissible fade show" role="alert">
<span>Get $5 off when you spend $10. Enter FIVEOFF at checkout.</span>
<button type="button" class="btn close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>

或者，您可以将单击事件处理程序添加到您的范围：

$('div.top-head.fixed-top span.float-right').on('click', function(e) {
//$(this).closest('div.top-head.fixed-top').hide();
// or, if you need to remove it
$(this).closest('div.top-head.fixed-top').remove();
});

.top-head {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
background: #FFFFFF;
width: 100%;
float: left;
height: 50px;
padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="top-head fixed-top">
<span>Get $5 off when you spend $10. Enter FIVEOFF at checkout.</span>
<span class="float-right">x</span>
</div>