CODEWITHSUNDEEP
angularhtmlcssngsticky
The Dead Man
The Dead Man

Reputation: 5576

Remove sticky class while scrolling down on angular 6 app?

I have a simple navbar in my angular 6 app, am using ng-sticky for sticky navbar , everything works as I want in desktop version. I just dont want that stiky navbar in mobile version

Here is the 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>

here is css media queries I tried 

@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;
    }
  }
}

Here is the live demo :

DEMO

I have tried different ways to disable or remove this sticky functionality in mobile device but stil nothing,

What do I neeed to do or change to achieve what I want?

Upvotes: 1

Views: 1017

Answers (2)

ByWaleed
ByWaleed

Reputation: 402

Instead of using CSS, I think using JS could be much easier here.

Something like this should work:

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

Another possibility is that you can add a separate style sheet for the sticky navigation, just for desktops, which could look something like this:

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

MORE INFO: https://css-tricks.com/resolution-specific-stylesheets/

Upvotes: 0

Vishal
Vishal

Reputation: 255

The position fixed is giving with jquery so mention position relative at media query try below code.

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

Upvotes: 1

Related Questions