Tips for positioning your side navigation menu parallel to the page edge

Im looking to have the side navigation floated to the left as I scroll down the page. I tried using the sticky property, but it didn't work out. Here's a snippet of the code:

.sticky-class {
  position: sticky;
  top: 30px;
}

This is how my HTML looks like:

<div class="side-nav" fxFlex="80" fxLayout="row" fxLayoutGap="1px">
    <div fxFlex="15">
      <div class="sticky-class">
        <app-sidenav></app-sidenav>
      </div>
    </div>
<div>

The app-sidenav component uses angular material for displaying content. How can I make it float as I scroll down?

Any suggestions on how to achieve this would be greatly appreciated.

cssangular

Answer №1

After carefully reviewing, it seems like your desire is for the navigation to be positioned on the left side of the bar and only appear when scrolling. This can be achieved using JavaScript:

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  var nav = document.getElementById("nav");
  if (prevScrollpos > currentScrollPos) {
    nav.style.display = "none";
  } else {
    nav.style.display = "block";
  }
  prevScrollpos = currentScrollPos;
};
#nav {
  float: left;
  position: fixed;
  top: 25%;
  display: none;
  background: lightblue;
  height: 50%;
  width: 30%;
}
#home {
  margin-top: 75%;
  margin-left: 25%;
}
<p>A p element!</p>
<h1>An h1!</h1>
<h2>Hurray! h2 time!</h2>
<h3>h3...yay!</h3>
<h4>Awesome!</h4>
<h5>So small...</h5>
<h6>I'm tiny!</h6>
<br>
<div>I'm a div!</div>
<span>I'm a span!</span>
<img src=""> this is an img!
<nav id="nav">
  <button id="home">Home</button>
</nav>

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

Troubleshooting problem with CSS overflow and absolute positioning on Android Browser

Our mobile web app was created using a combination of JQuery Mobile, PhoneGap, and ASP.net MVC. It is designed to function smoothly on both iOS and Android devices regardless of the browser being used. We have conducted tests on various devices and everyth ...

androidcsscordova

Steps for adjusting the position of this div in relation to the main container

Apologies in advance for my lack of HTML skills. I am struggling with a page layout issue. I have a website at . When the window is resized, the ads div on the right side overlaps the main container. What I would like to achieve is to make this ads div re ...

javascriptjqueryhtmlcss

Attempting to eliminate the padding from the unordered list (ul) element within the pop-up box

Upon clicking the chip with chipName="button test IPA", a popup window appears. I am attempting to remove the padding from the ul tag within that popup. The issue I'm facing is that I cannot locate the ul tag in my HTML or JSX code. I have assigned a ...

javascripthtmlcssreactjsmaterial-ui

Issue with bidirectional data binding in Angular 2 on input element not functioning as expected

Looking at the code snippet below, I have noticed that even though the textchange function is called when the input value changes, the text property of the InputMaskComponent remains constant. I am not able to identify the issue in my code. InputMaskCompo ...

javascriptangulardata-bindingonchange

Tips for transferring numerous photos from Angular 8 to ASP .NET Core

I have been struggling to find a solution for the issue I am facing. When sending multiple images from Angular using "from data", although the files are successfully sent in the network request, the parameters on the API method show count=0. Here is the s ...

angular.net-core

The Angular component utilizes its own module to efficiently pass data to a child component within the application module

I am encountering an issue where I have a parent component with its own module and am passing data to a child component imported in the app-module using @Input, however, there is an error being thrown. The error message states: "Can't bind to 'c ...

angularinputmodulebindingangular8

Missing arrow icon in Bootstrap 4 navbar menu and sub menu

I am attempting to use the navbar component from Twitter Bootstrap 4 with a nested sub menu, but the arrow in the menu item that has a sub menu is not appearing at all, and I am unsure why. Here is where the arrow appears: https://i.sstatic.net/J6xI4.jpg ...

htmlcssbootstrap-4asp.net-core-2.0

What causes the element to load with a transparent appearance? And why is my JavaScript code overriding the hover effect on it?

My goal is to have an element fade out when clicked and then fade back in when its space is clicked again. I also want the opacity of the element to be 0.9 instead of 1 when visible. I've encountered two issues with my code. First, the hover selector ...

javascriptcss

Achieving the highest ranking for Kendo chart series item labels

Currently, I am working with a Kendo column chart that has multiple series per category. My goal is to position Kendo chart series item labels on top regardless of their value. By default, these labels are placed at the end of each chart item, appearing o ...

javascriptangulartypescriptkendo-ui-angular2kendo-chart

Define the width and height of images specifically for screens with a maximum device width using @media queries

Having some trouble with the sizing of images on mobile devices. Using the code below, but for some reason, the height remains at 13em on smartphones, despite setting it differently for other devices. Any ideas why this might be happening? @media only sc ...

htmlcssimagelayoutheight

"Animating a card to slide in from the left side upon clicking a button in a React app

How can we create a feature where, upon clicking "Apply Coupon" in Image 1, a window slides in from the left just above the webpage (as shown in Image 2)? Additionally, in Image 2, there is a blue transparent color on the webpage adjacent to this sliding w ...

javascripthtmlcssreactjs

Struggling to align block elements correctly after changing them to inline

I've been trying to align this paragraph while keeping the navigation menu and logo in their correct positions. I attempted to make everything inline, but that didn't work. Then I experimented with the float property, which only made things worse ...

csshtmlhyperlink

angularjs: container holding directive is currently not visible, with a height and width of 0 pixels

When implementing a directive in this way, the actual element (<a-directive>) appears to have dimensions of 0px height and 0px width. View jsfiddle example var myApp = angular.module('myApp', []).directive('aDirective', function ...

cssangularjsangularjs-directive

Avoiding loading certain images within an *ngFor loop

Is it possible to control the loading of images within an *ngFor loop in Angular? Load image with index X first Fire a function once all other images have loaded The goal is to prioritize the display of important images while optimizing bandwidth usage. ...

angular

The angular framework is unable to assign a value to the property 'xxxx' because it is currently undefined

I am currently working on a simple application using Ionic (angular) and I am facing an issue with the error message: Cannot set property 'origin' of undefined Below is the interface for Product.ts: export interface Products{ id: number ...

angulartypescriptionic-framework

A guide to modifying the color of the Menu component in material-ui

Currently, I am utilizing the Menu component from material-ui and facing an issue while trying to modify the background color. The problem arises when I attempt to apply a color to the Menu, as it ends up altering the entire page's background once the ...

javascripthtmlcssreactjsmaterial-ui

The SWT Browser is failing to display Angular 2 pages within the Eclipse view

I attempted to embed Angular 2 HTML pages within the SWT Browser widget, but it seems that the Angular 2 HTML pages are not displaying correctly inside the SWT Browser. However, I had no trouble embedding Angular 1 (or Angular JS) pages within the SWT bro ...

javascriptangularjsangularswteclipse-rcp

Is there a way to make the header reach the full width of the page?

Is there a way to make my header extend across the entire page? I attempted using margin-left and right, but it didn't yield the desired outcome. Header.css .header{ background: green; height: 70px; width: 100%; display: flex; ju ...

javascripthtmlcssreactjsmaterial-ui

Is there a way to create distance between these icons?

<div id="unique-icons"> <a href="#"> <img class="github-logo1" src="GitHub-Mark-64px.png" alt="first github logo"> </a> <a href="#"> <i ...

htmlcssicons

Is there a method to iterate through dynamically added nested arrays, similar to the Russian Matryoshka dolls?

I am facing a challenge in my Angular TypeScript class where I need to define a function that can loop through dynamically added nested arrays. The issue arises because my template displays a custom Kendo grid which requires me to traverse a type of "Matri ...

arraysangularnested