时间戳

首页 > 解决方案 > 粘性导航栏未正确定位

jquery - 粘性导航栏未正确定位

问题描述

您好，我刚刚在上方和标题上制作了一个导航栏，第一个解决方案是使用，.sticky-top但是当我决定在导航栏被越过后让一些图标出现在导航栏上时，我遇到了一些小麻烦。
现在我的导航栏没有按原样返回（它粘在真正的顶部，在我的标题上方），我有一个垂直溢出，我被卡住了。

示例（红色容器经过 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>

查询：

  $(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%;
}

标签： jqueryhtmlcssbootstrap-4

解决方案

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

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

如果你能计算出你需要的偏移量，就把它放在 top 属性中，如果是200px，例如：

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

推荐阅读