Question

你好，我只是在标题上方制作了一个导航栏，第一个解决方案是使用.sticky-top，但是当我决定让导航栏越过后让一些图标出现在导航栏上时，我遇到了一些麻烦。 /> 现在我的导航栏没有恢复原状（它贴在标题顶部的真实顶部），我出现了垂直溢出并且被卡住了。

Example（红色容器已经过Photoshop处理，只是为了向您显示导航栏的位置）

您能帮助我理解我做错了什么吗？谢谢。

导航栏：

   <nav id="navbar" class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#al-center-nav" aria-controls="al-center-nav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#"><img src="imgs/logo.png" id="logo" height="40px" width="75px"></a>
    <div class="collapse navbar-collapse center" id="al-center-nav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Link 1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link 3</a>
        </li>
      </ul>
    </div>
    <a href="http://www.facebook.com" alt="Facebook" id="fb"><i class="fa fa-facebook-official"></i></a>
    <a href="http://www.instagram.com" alt="Instagram" id="ig"><i class="fa fa-instagram"></i></a>
  </div>
</nav>

JQuery：

  $(window).ready(function() {
    $(window).scroll(function () {
      if ($(window).scrollTop() >= $('#navbar').offset().top) {
        $('#navbar').addClass('sticky');
        $('#logo').css('margin-left', '-70px');
        $('#fb').css('right', '0');
        $('#ig').css('right', '-70px')
      }
      else {
        $('#navbar').removeClass('sticky');
        $('#logo').css('margin-left', '-280px');
        $('.social').css('margin-left', '-290px');
        $('#fb').css('right', '-280px');
        $('#ig').css('right', '-280px')
      }
    });
  });

CSS：

  #fb {
font-size: 40px;
right: -280px;
position: absolute;
transition: all 600ms;
  }


  #ig {
    font-size: 40px;
    right: -280px;
    position: absolute;
    transition: all 600ms;
  }

  #logo {
    margin-left: -280px;
    position: absolute;
    top: 10px;
    transition: all 600ms;
  }

  #navbar {
    color: #ec8013;
    font-family: 'Montserrat';
    font-size: 18px;
    font-weight: 500;
    margin-top: -51px;
    overflow: hidden;
    padding: .5rem;
  }

  .nav-item {
    margin-right: 20px;
    margin-left: 20px;
  }

  .nav-link {
    padding-top: 16px;
    color: #ec8013!important;
    transition: 0.2s;
    box-sizing: border-box;
    height: 55px;
  }

    .sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

Answer 1

您的导航栏CSS设置为将其粘贴在顶部：

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

如果可以计算所需的偏移量，请将其放在top属性中（如果它是200px，例如：

.sticky {
  position: fixed;
  top: 200px;
  width: 100%;
}

粘性导航栏无法正确定位

1 个答案: