我的网站上有一个问题,我的HTML代码中有两个神秘的div,我不确定为什么。
我认为使用数据-magellan-expedition =“已修复”(名称不详的抱歉)#navigation块。真的会让某人看一眼并给我一些指示,以及如何解决这个问题?
粘贴所有相关代码。
我正在使用以下javascript:
$(window).load(function() {
var offset = 200; // some offset value for which when the header becomes hidden
$(window).scroll(function() {
if($('#navigation').is(':visible') && $(window).scrollTop() < offset) {
$('#navigation').fadeOut(100);
} else if(!$('#navigation').is(':visible') && $(window).scrollTop() > offset) {
$('#navigation').fadeIn(400);
}
});
});
这是css:
#navigation {
display: none;
background-color:rgba(27, 28, 29, 1);
height: 70px;
}
.logo {
margin: -10px 0;
}
.nav {
li {
text-align: right;
padding: 10px 0 0 0;
font-family: 'Arvo', cursive;
color: $primary-color;
cursor: pointer;
}
li:hover {
color: $secondary-color;
}
}
.nav .active{
color: $secondary-color;
}
这是HTML:
<div class="hide-for-small-only removeDivs">
<div id="navigation" data-magellan-expedition="fixed">
<div class="row">
<div class="medium-3 columns text-center">
<div class="logo">
<h1>
<a title="#" href="#top">
<img src="#" alt="#" />
</a>
</h1>
</div>
</div>
<nav>
<div class="medium-9 columns">
<ul class="nav right inline-list">
<li data-magellan-arrival="home" data-slide="1">Link1</li>
<li data-magellan-arrival="services" data-slide="2">Link2</li>
<li data-magellan-arrival="potfolio" data-slide="3">Link3</li>
<li data-magellan-arrival="contact" data-slide="4">Link4</li>
</ul>
</div>
</nav>
</div>
</div>
</div>
现在由于某种原因,沿着这条线的某个地方呈现了以下两个div:
当您开始滚动并且js效果在偏移点生效时,会轻推内容。
目前以下css已经修复了它。
removeDivs div:nth-child(n+2) {
display: none!important;
height: 0!important;
}
有没有人对导致这种情况的原因有任何想法?我正在使用Foundation 5。
非常感谢。