How can I dynamically remove the sticky class when scrolling down in an Angular 6 application?

My Angular 6 app has a simple navbar with ng-sticky for a sticky effect on desktop, but I don't want the navbar to be sticky on mobile devices.

Here is the HTML code:

<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>

Below are the CSS media queries I've attempted:

@media only screen and(max-width: 768px) {
  // Styles for mobile view goes here
}

If you'd like to see a live demo, click this link:

DEMO

I've tried various methods to disable or remove the sticky functionality on mobile devices without success. What changes do I need to make to achieve the desired outcome?

angularhtmlcssngsticky

Answer №1

Using jQuery, set the position fixed and ensure to include a media query for relative positioning with the following code snippet:

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

Answer №2

Instead of relying solely on CSS, I believe implementing JavaScript could provide a simpler solution in this scenario.

You could consider using the following code snippet:

$(window).on('resize', function () {
    // Clear any existing classes that may need removal
    $('.class1').toggleClass('YOUR-CLASS', $(window).width() < 768);
});

Another option is to create a separate stylesheet specifically for the sticky navigation, targeted for desktop users. Here's an example of what that might look like:

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

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Minimize the space between flex items

I'm currently working with a <div> container styled as flex using the following CSS properties: .icon-container { padding: 3px; padding-top: 15px; padding-bottom: 15px; display: flex; flex-direction: column; align-content ...

htmlcssflexbox

Having several horizontal scrollbars at once on a single webpage

I stumbled upon a great example showcasing how to scroll a div on my page: Check out this Codepen - https://codepen.io/zheisey/pen/xxGbEOx Although, I am looking to extend this functionality to allow multiple divs to scroll together. Any suggestions? I ...

javascripthtmljquerycss

Tips for dynamically displaying Angular Material tags within an Angular component using JSON data

I received a JSON response structured like this: { _id: '5dd0d0dc4db1cf9c77781aaa', picture: 'http://placehold.it/32x32', name: 'Graciela Mcmahon', guid: '98c0fcc2-1dfc-4974-bdae-d8263d783e0a&ap ...

angulartypescriptangular-materialowl-carousel

The browser Internet Explorer fails to recognize the @media screen rule

Currently, I'm focusing on creating a responsive design for a web page. The issue I am encountering involves loading data via ajax to render forms. Strangely, only Internet Explorer seems to think that the width is less than 768px after rendering (thu ...

javascriptcssajaxinternet-explorerjoomla3.0

My array magically transforms into an object once it reaches 22 elements, why is that happening? (node)

While working on a form with multiple checkboxes that have the same name and submitting it through a node/express post route, I encountered an issue. Here is the corresponding HTML code: https://pastebin.com/xeQae6GA The problem arises when trying to ret ...

htmlarraysnode.jsformsexpress

Is Angular mat-icon undergoing a "transformation"?

Overview: The material icon I am using is the "+" sign to represent adding a new item on a webpage. While it displays correctly in English, the Spanish version of the site shows "ñ" instead. Inquiry: Should I leave the tags empty or remove the translati ...

angularinternationalizationangular-materialangular-i18n

When adding a border radius to an iframe, you'll notice delicate curved lines appearing on all four corners

I have implemented material UI's CardMedia component to display an Iframe with a embedded youtube link. To achieve rounded corners for the iframe, I set the border-radius to 30px. Although it successfully rounds the corners, it also introduces thin li ...

cssmaterial-uilinethinborder-radius

Using the float property in IE7 can cause a line break and may result in other divs being pushed down

Hey there, I've encountered a few issues with floats in IE multiple times. Here's an example to illustrate what I mean. Please note that this example functions properly in Firefox and Chrome. index.html <html> <link href="style.css" rel= ...

htmlcss

nx serve is failing to recognize the import statement for "@angular/localize/init"

Currently, I am in the process of incorporating @angular/localize into my project within an Nx workspace ([email protected]). To achieve this, I am adhering to the official guidelines outlined at: https://angular.io/guide/i18n-overview In particular, ...

angularinternationalizationnrwl-nx

What is the proper way to include 'rowspan' specific CSS within an HTML table?

I have an HTML table with rowspans in it: table tr, td { border: 1px solid black; } tr:nth-child(1) { background-color: red; } tr:nth-child(2) { background-color: blue; } <table> <tr> <td rowspan=2>Section 1</td> ...

javascripthtmlcss

Problem with the appearance of the drop-down menu

After a few dedicated weeks on a Web application project, I am currently tackling the challenge of a drop-down menu. Despite its functionality, there are two specific points I need help with: When expanding the menu by selecting a main item, I want to pr ...

jqueryhtmlcss

Modifying CSS classes using conditional statements and loops

var first_left = ['Photo', 'Info', 'Question 1', 'Question 2', 'Question 3', 'Question 4', 'Question 5']; var names = ['Abuela', 'Abuelo', 'Oma']; functio ...

javascriptjquerycss

Issue with ChartJs version 2.8.0: The custom tooltip remains visible even when clicking outside the chart canvas or moving the mouse pointer

I am utilizing ChartJs to display a line chart with a custom tooltip that appears upon the click event of the data points. The challenge I am facing is that the custom tooltip remains visible even when the mouse pointer is outside the chart canvas area. ...

javascripthtmlcsschartschart.js

Incomplete Loading of Google Maps

Let me clarify that the solutions I have come across so far have not been successful. I am attempting to display a modal alert with a basic Google Maps integration. Problem: Google Maps does not load completely. Snippet from my .js file: var map; functi ...

javascriptjqueryhtmlgoogle-mapszurb-foundation

When the mouse is moved to the UL LI list, the border color of the Top Hover is reverted back to default

Can you assist me with this issue? I need to modify the code below so that the border color remains blue while a user selects an item from the UL LI list. Here is an image showing the current problem: https://i.sstatic.net/DS7hO.png And here is a pictu ...

htmlcssdom

Is it possible to receive a notification when the DOM elements of an Angular 2+ component are successfully rendered in the browser?

I have a parent component in Angular that contains over 1000 DOM nodes. These nodes are rendered using two ngFor cycles, resulting in a 2D table structure. Each of these DOM nodes is an individual Angular component. The styles and displayed values of these ...

angular

Utilizing the toastr service through Angular injections

I am looking to manage common HTTP errors by using the Angular Materials MDSnackbar service. However, I am struggling to figure out how to implement it properly. When I add MdSnackBar to the constructor like private mdsnackbar: MdSnackBar, it gives me an e ...

angularangular-servicestoastrangular-toastr

Encountering a lack of XHRBackend provider when using Angular 2 and Http service

My current project is being built using angular2 (angularcli generated), webpack, scss, and module-oriented architecture. For handling HTTP requests, I opted to create a Service that is utilized by an Authentication service. All of this is referenced wit ...

angulardependency-injectionwebpackng-modules

Hidden submission button on form

I'm working on a form that is being validated with specific code limitations. For example, the username field must only contain alphabet characters. The validation function returns either true or false. function isAlphapet() { var alphaExp = /^[a-z ...

javascripthtmlformssubmitshow

HttpErrorResponse "Received a 500 OK Http failure response when accessing http://localhost:8443/gestion-centros-api/workCenters/vehicles."

I encountered an issue while attempting to fetch the list of vehicles from the API. The error message displayed indicated that I need assistance with this problem. Here is the code snippet: Code logic in the service file getAllVehicle(): Observable< ...

angular