修复了滚动时的标题fadeIn

时间:2014-01-27 22:48:46

标签: jquery html css html5 zurb-foundation

我的网站上有一个问题,我的HTML代码中有两个神秘的div,我不确定为什么。

我认为使用数据-magellan-expedition =“已修复”(名称不详的抱歉)#navigation块。真的会让某人看一眼并给我一些指示,以及如何解决这个问题?

Website

粘贴所有相关代码。

我正在使用以下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:

enter image description here

当您开始滚动并且js效果在偏移点生效时,会轻推内容。

目前以下css已经修复了它。

removeDivs div:nth-child(n+2) {
  display: none!important;
  height: 0!important;
}

有没有人对导致这种情况的原因有任何想法?我正在使用Foundation 5。

非常感谢。

0 个答案:

没有答案