Question

我在我的angular 6应用程序中有一个简单的导航栏，正在将ng-sticky用于粘性导航栏，所有功能都可以在桌面版本中使用。我只是不想在移动版本中使用那种时髦的导航栏

这是html：

<div class="main-header">
  <nav class="main-nav" ng-sticky [offSet]="0" [addClass]="'main-sticky'" appMainNav #ref="appMainNav">
    <div class="main-nav__logo " ng-sticky [offSet]="0" [addClass]="'main-sticky__logo'">
      <img class="man-nav__logo-green" src="/assets/images/logo-white.png">
    </div>
    <div class="main-nav__toggle">
      <i class="main-nav__bars fa fa-bars" ng-sticky [offSet]="0" [addClass]="'main-bars'"></i>
    </div>
    <ul class="main-nav__list " ng-sticky [addClass]="'main-sticky-link'" [ngClass]="ref.click === true? 'Navbar__ToggleShow' :''">
      <li class="main-nav__item">
        <a class="main-nav__link" href="#">Home</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link" href="#">About us</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link" href="#">What we do</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link " href="#">Projects</a>
      </li>
      <li class="main-nav__item">
        <a class="main-nav__link " href="#">Contact</a>
      </li>
    </ul>
  </nav>

这是我尝试过的CSS媒体查询

@media only screen and(max-width: 768px) {
  .main-nav {
    margin: 0;
    display: block;
    position: inherit;
    overflow: auto;
    background: white;
  }
  .main-nav__list {
    margin-top: 20px;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .main-nav__item:after {
    content: '';
    width: 1px;
  }
  .Navbar__ToggleShow {
    display: flex;
  }
  .main-nav__logo {
    position: relative;
    bottom: 49px;
    background-repeat: no-repeat;
    background-image: url("/assets/images/logo-green.png");
  }
  .man-nav__logo-green {
    visibility: hidden !important;
  }
  .main-nav__bars {
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    padding: 26px;
    font-size: 50px;
    color: #00964e;
     position: absolute; 
    top: 0;
    bottom: 36px; 
    right: 28px; 
    margin-top: -196px;
  }
  .main-nav__link {
    color: #444;
  }
  .main-banner {
    &__arrow-down {
      display: block !important;
      position: initial;
      margin: 0 auto;
      margin-top: 50px;
    }
    h2 {
      text-align: center;
    }
  }
}

这是现场演示：

DEMO

我尝试了不同的方法来禁用或删除移动设备中的此粘性功能，但一无所获

我需要做什么或改变才能实现自己想要的？

Answer 1

固定位置由jquery提供，因此在媒体查询中提及相对位置，请尝试以下代码。

@media only screen and(max-width: 768px) {
.main-nav[_ngcontent-c1] {
position: relative !important;
}
}

Answer 2

与使用CSS相比，我认为在这里使用JS会容易得多。

类似的事情应该起作用：

$(window).on('resize', function () {
    // remove any other classes that might need removing
    $('.class1').toggleClass('YOUR-CLASS', $(window).width() < 768);
});

另一种可能性是，您可以为粘性导航添加一个单独的样式表，仅针对台式机，这可能是这样的：

<link rel="stylesheet" media="screen and (min-device-width: 789px)" href="sticky.css" />

更多信息：https://css-tricks.com/resolution-specific-stylesheets/

向下滚动角度6应用程序时删除粘性类吗？

2 个答案: