Question

滚动时我设法修复了菜单，没关系。但不幸的是，它在使用内部页面链接时会隐藏一些标题。所以我想在滚动大约后显示屏幕底部的菜单栏而不是顶部（页面加载时的初始位置）。 20px ......

这是我的代码：

jQuery("document").ready(function($) {

  var nav = $('.nav-container');

  $(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
      nav.addClass("f-nav");
    } else {
      nav.removeClass("f-nav");
    }
  });

}); < /script>

    <script>
    $(function(){
    
    var nav = $('#nav'),
        pos = nav.offset();
        
        $(window).scroll(function(){
            if($(this).scrollTop() > pos.top+nav.height() && nav.hasClass('default')){
                nav.fadeOut('fast', function(){
                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');
                });
            } else if($(this).scrollTop() <= pos.top && nav.hasClass('fixed')){
                nav.fadeOut('fast', function(){
                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');
                });
            }
        });

    });

  .nav-container {
    background-color: white;
    repeat-x 0 0;
  }
  .f-nav {
    z-index: 9999;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
  }
  .nav a {
    color: #5a5a5a;
    font-size: 11px;
    font-weight: bold;
    padding: 14px 18px;
    text-transform: uppercase;
  }
  .nav li {
    display: inline;
    text-align: center;
  }
  .nav.show {
    opacity: 1;
    visibility: visible;
  }

<div class="nav-container">
  <div class="nav">
    <ul>
      <li><a href="">Home</a>
      </li>
      <li><a href="">CSS</a>
      </li>
      <li><a href="">PHP</a>
      </li>
      <li><a href="">SEO</a>
      </li>
      <li><a href="">jQuery</a>
      </li>
      <li><a href="">Wordpress</a>
      </li>
      <li><a href="">Services</a>
      </li>
    </ul>
    <div class="clear"></div>
  </div>
</div>

它可能不是很“干净”......但是有人有想法吗？

非常感谢！

Answer 1

因为你的导航栏“没有高度”（因为它是固定的），它会在页面顶部而不是在元素下方显示标题。通过在“真实”元素之前添加如下所示的锚点（通过单击标题链接到的位置）来修复此问题。

<span id="**ITEM**" class="anchor"></span>

并将其添加到您的CSS中。

.anchor {
    display: block;
    height: 30px; /*same height as header*/
    margin-top: -30px; /*same height as header*/
    visibility: hidden;
}

希望这有助于：）

您可以在我的latest project上看到它正常工作。（点击标题中的联接）

滚动~20px后菜单栏固定底部屏幕

1 个答案: