我有一个粘性子菜单。当我滚动到页面上的某个部分时,此菜单会粘在顶部。但是,我希望 Logo 出现在滚动条上,并在粘性菜单不在顶部时隐藏。我将如何实现这一点?这是我正在尝试做的一个示例(您需要向下滚动页面才能看到粘性菜单)-https://www.vidyard.com/platform/viewedit/
Logo 和“获取演示”按钮是我想要实现的目标。
var menu = document.querySelector('.menu-t')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function () {
if (window.pageYOffset >= menuPosition) {
menu.style.position = 'fixed';
menu.style.top = '0px';
} else {
menu.style.position = 'static';
menu.style.top = '';
}
});
.page-section {
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.page-section.page-section-center {
align-content: center;
text-align: center;
}
.menu-t {
margin: 0;
padding: 0;
width: 100%;
background-color: #FFF;
z-index: 1000;
border-bottom: 1px #eee dotted;
}
.menu-t li {
display: inline-block;
text-align: center;
padding: 20px;
text-transform: uppercase;
font-size: 14px;
}
.menu-t a {
display: block;
padding: 10px 0;
color: #32404E !important;
-webkit-transition: color ease 0.3s;
-o-transition: color ease 0.3s;
transition: color ease 0.3s;
}
.menu-t a:hover {
color: #2db2e9 !important;
}
<section class="page-section">
<br/>
<br/>
<br/>
<br/>
</section>
<section class="page-section page-section-center hidden-xs hidden-sm">
<ul class="menu-t">
<li>ITEM</li>
<li>
<a href="#" class="text-thick">What Is</a>
</li>
<li>
<a href="#" class="text-thick">How</a>
</li>
<li>
<a href="#" class="text-thick">You're In Good Company</a>
</li>
<li>ITEM</li>
</ul>
</section>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
最佳答案
尝试这样。
在 li 元素中创建一个 img 元素,并在开始时隐藏显示,并在滚动时隐藏/显示它。
var menu = document.querySelector('.menu-t')
var menuPosition = menu.getBoundingClientRect().top;
window.addEventListener('scroll', function () {
if (window.pageYOffset >= menuPosition) {
menu.style.position = 'fixed';
menu.style.top = '0px';
menu.firstElementChild.firstElementChild.style.display = "block";
} else {
menu.style.position = 'static';
menu.style.top = '';
menu.firstElementChild.firstElementChild.style.display = "none";
}
});
.page-section {
border-bottom: 1px solid #ddd;
overflow: hidden;
}
.page-section.page-section-center {
align-content: center;
text-align: center;
}
.menu-t {
margin: 0;
padding: 0;
width: 100%;
background-color: #FFF;
z-index: 1000;
border-bottom: 1px #eee dotted;
}
.menu-t li {
display: inline-block;
text-align: center;
padding: 20px;
text-transform: uppercase;
font-size: 14px;
}
.menu-t a {
display: block;
padding: 10px 0;
color: #32404E !important;
-webkit-transition: color ease 0.3s;
-o-transition: color ease 0.3s;
transition: color ease 0.3s;
}
.menu-t a:hover {
color: #2db2e9 !important;
}
.menu-t li img{
display: none;
}
<section class="page-section">
<br/>
<br/>
<br/>
<br/>
</section>
<section class="page-section page-section-center hidden-xs hidden-sm">
<ul class="menu-t">
<li>
<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRJfyp7Gqe9jDGcVUgJIq0iTOOyzv6MkOthkXkAOzvqiiBPHceh"/>
</li>
<li>ITEM</li>
<li>
<a href="#" class="text-thick">What Is</a>
</li>
<li>
<a href="#" class="text-thick">How</a>
</li>
<li>
<a href="#" class="text-thick">You're In Good Company</a>
</li>
<li>ITEM</li>
</ul>
</section>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
关于javascript - 如何让 Logo 出现在滚动的粘性菜单中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41572198/