我正试图在网站顶部设置一个粘性促销栏。下方有任何徽标。徽标下方是一个粘性导航栏。促销和导航栏应为col-8。
所有功能都可以使用粘滞功能,但是当我在导航和促销栏上添加“ col-8”时,粘滞性将不起作用。
我正在使用Bootstrap 4。
(有趣的是,它在CodeSandbox上有效,但在chrome / safari上却无效:https://codesandbox.io/s/stoic-haslett-qyrhn?fontsize=14)
代码如下:
html {
scroll-behavior: smooth;
}
body,
* {
font-family: 'Futura', 'Montserrat', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font: 16px/18px sans-serif;
background-color: black !important;
max-width: 100%;
max-height: 100%;
}
img {
max-width: 100%;
max-height: auto;
}
/* ----- Logo ----- */
.logo {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%);
height: 35em;
max-width: 100%;
margin: 3em 0 3em 0;
}
/* ----- Promo bar ----- */
.promo-bar {
text-align: center;
font-weight: bold;
background: linear-gradient(to bottom, #e8b923 0%, #e8b923 100%);
color: #2F2E2E;
vertical-align: middle;
font-size: 1.3em;
padding: 0.5%;
}
/* ----- Navbar ----- */
#navbar {
background-color: #333;
text-align: center;
border-top: 1px solid whitesmoke;
border-radius: 7px;
display: flex;
justify-content: space-around;
margin: 1em 0 1em 0;
width: 100%;
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: .7em;
text-decoration: none;
}
.sticky {
position: sticky;
top: 0;
padding: 0 !important;
}
<!-- Promotion bar -->
<div class="col-8 container-fluid sticky" style="z-index: 1">
<div class="promo-bar ">Réduction -10% en caisse avec le code: "SITEWEB10"</div>
</div>
<!-- Logo Centered -->
<img src="logo.jpg" class="logo">
<!-- Nav Bar -->
<div class="col-8 container-fluid sticky" style="z-index: 1">
<div id="navbar">
<a>|</a>
<a href="#home">Accueil</a>
<a>|</a>
<a href="#story">Notre histoire</a>
<a>|</a>
<a href="#contact">Contacts</a>
<a>|</a>
</div>
</div>
感谢您付出的时间,并为我的英语不好对不起。
答案 0 :(得分:0)
@DDeveloper的答案可以帮助我找到解决方案。
在第一个<div>
函数中使用sticky
函数,在他的孩子中使用col-8
。
赞:
<div class="sticky">
<div class="col-8"></div>
</div>