Building a concealed navigation bar using HTML and Typescript that appears when you start scrolling - here's how!

Seeking guidance on creating a hidden navbar that becomes visible as you scroll the page, using TypeScript. Can anyone provide assistance?

<nav class="navbar navbar-expand-lg navbar-dark pb_navbar pb_scrolled-light w3-animate-right navlist-right  "  id="navbar">
  <div class="container">
    <a class="navbar-brand" href="index.html">Website</a>
    <button class="navbar-toggler d-block d-sm-none"   (click)="toggleNavbar()" type="button" data-toggle="collapse" data-target="#probootstrap-navbar" aria-controls="probootstrap-navbar" aria-expanded="false" aria-label="Toggle navigation">
      <span><i class="navbar-toggler-icon"></i></span> </button>
    <div class="collapse navbar-collapse  "  [ngClass]="{ 'show': navbarOpen }" id="onright">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active"><a class="nav-link" href="#" >Home  <span class="sr-only">(current)</span></a></li>
        <li class="nav-item active"><a class="nav-link" href="#service" >Service</a></li>
        <li class="nav-item active"><a class="nav-link" href="#blog">Blog</a></li>
        <li class="nav-item active"><a class="nav-link" href="#contact">Contact</a></li>        
      </ul>
    </div>
  </div>
</nav>
htmlcssangulartypescripttwitter-bootstrap

Answer №1

One possible solution is presented below: 

<div class="collapse navbar-collapse nav"  [ngClass]="{ 'show': navbarOpen }" id="onright">
  <ul class="navbar-nav ml-auto">
    <li class="nav-item active"><a class="nav-link" href="#" >Home  <span class="sr-only">(current)</span></a></li>
    <li class="nav-item active"><a class="nav-link" href="#service" >Service</a></li>
    <li class="nav-item active"><a class="nav-link" href="#blog">Blog</a></li>
    <li class="nav-item active"><a class="nav-link" href="#contact">Contact</a></li>        
  </ul>
</div>
<style>
.nav  {
top:-70px;
opacity:0;
}
</style>

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

Illustrating a fresh DOM element with intro.js

I am currently utilizing intro.js to create a virtual 'tour' for my website. As I aim to provide a highly interactive experience for users, I have enabled the ability for them to engage with highlighted DOM elements at different points in the tou ...

javascripthtmlintro.js

Can we not customize a nested component using the 'styled()' function in MUI?

Looking at the code snippet below, my attempt to style an MUI Stack component within an MUI Dialog component seems to be falling short. The Stack styles are not being applied as expected: const CustomDialog = styled(Dialog)(({ theme }) => ({ ' ...

javascriptcssreactjsmaterial-ui

Redirecting visitors to a specific section of the website as soon as they enter the site

Currently, I am utilizing a jquery plugin known as Ascensor which can be found at this link: This plugin is designed for creating one-page websites with smooth scrolling capabilities both vertically and horizontally. It operates using a coordinate system ...

javascriptjqueryhtmlcss

What is the best way to ensure my image adjusts its width and height responsively?

How can I make my image responsive to the size of the container, adjusting not just the width but also the height to fit in a container with a max-width of 1300px? I have created a test image with dimensions of 400px height and 1300px width. Take a look a ...

css

Retrieving headers and query parameters from a WebView in Nativescript

Currently, I'm developing a mobile app using Nativescript and have integrated a WebView on the main page for logging in with Spotify. Post-login, I need to extract headers/query params from the WebView page. Is this achievable? If so, how can I go abo ...

javascriptangulartypescriptnativescriptnativescript-angular

Combining and arranging numerous items in a precise location in three.js

I am currently working on a web application using three.js with Angular and facing some challenges when trying to set the precise positions of objects. The requirement is to load various objects and position them in specific locations. In order to load di ...

javascriptangularthree.jsdom-events

Exploring the hover effect in CSS pseudo classes

I currently have a sub menu that consists of 4 headers. The code snippet provided below is used to style the first element in each column of the submenu. My next task is to create a hover effect for these elements, where the background color changes to gr ...

htmlcssclassselector

The solution to the issue: [splide] Unable to find a track/list element

Currently, I am trying to create a thumbnail carousel following this tutorial, but I seem to be encountering an error. The guide does not provide instructions on how to create the #main-carousel element, so despite trying different methods, I am still unab ...

javascripthtmlsplidejs

Utilizing Typescript DOM library for server-side operations

I've been working on coding a Google Cloud Function that involves using the URL standard along with URLSearchParams. After discovering that they are included in the TypeScript DOM library, I made sure to add it to my tsconfig file under the lib settin ...

typescriptgoogle-cloud-functionstypescript-lib-dom

What are some methods to avoid clipping absolute positioned elements while maintaining a box shadow around the parent div?

Here is an example to illustrate my question: Example Code The code provided above is a simplified version of my actual code. I am facing an issue where setting the wrap-div to overflow: visible prevents the menu from being cut off, but it also causes the ...

javascripthtmlcssoverflow

Customizing the Dropdown Arrow Icon to a Desired Icon of Choice

I'm looking to customize the dropdown select on my website by changing the arrow icon to a plus icon, which will then turn into a minus icon when clicked and the choices are displayed. I'm new to jquery and eager to learn more about this language ...

jqueryhtmlcss

Encountering a challenge with triggering a dialog box from an onClick event on a pie chart in Angular 8 when utilizing chart.js

I am currently using a chart.js pie chart to showcase some data. I have managed to display the required information in an alert box when a slice of the pie is clicked. However, I am now looking for a way to present this data in a dialog box instead. &a ...

angulartypescriptchart.jspie-chart

Can columns in Bootstrap be used within a row without a container?

I am currently using bootstrap 4.6.0 and I have a question about the following code structure. While everything seems to be functioning correctly, I am uncertain if I should be utilizing a different container: <div class="container-fluid"> ...

htmlbootstrap-4col

Verify if the Observable (HTTP request) has provided a response, and if not, hold for it?

In my Angular app, I have a calendarComponent that fetches entries from a MongoDB through firebase cloud functions using the calendarService. When creating a new entry, I display an addEventComponent dialog which requires data from the database to function ...

angularrxjsangular-material

Mapping nested JSON to model in Angular2 - handling multiple API requests

Having trouble integrating two HTTP API Responses into my Model in Angular 2. The first API Call returns data like so: [{ "id": 410, "name": "Test customdata test", "layer": [79,94] }, { "id": 411, "name": "Test customdata test2", ...

jsonangulartypescriptmapping

Sortable lists that are linked together, containing items that cannot be moved

I have been trying to implement two connected sortable lists with disabled items using this sortable list plugin, but for some reason, I am unable to get it to work. Is there anyone who can provide assistance with this issue? <section> <h1&g ...

jqueryhtmljquery-uijquery-ui-sortable

Go through the fields of Vue components iteratively

I've created a Vue component that has over 40 properties which represent a form for editing a business entity. The process flow goes as follows: Upon mounting, the data is fetched from the server in JSON format and used to initialize the component p ...

jsontypescriptvue.js

After parsing through the HTML content and displaying itynamic spacing will be added

My index.php file contains code that will echo a string created by a function in functions.php using a returned .html file. Here is the code in index.php: require_once('functions.php'); echo create_page(); In functions.php, there is a functio ...

phphtmlmodel-view-controller

Customize the text that appears when there are no options available in an Autocomplete component using React

Recently, I came across this Autocomplete example from MaterialUI that caught my attention. https://codesandbox.io/s/81qc1 One thing that got me thinking was how to show a "No options found" message when there are no search results. ...

javascripthtmlreactjsmaterial-ui

Encountered a problem while trying to retrieve HTML values from an object within a ReactJS component

I have encountered an issue while working with an object that contains HTML values. When trying to access it, I am facing the following error: Element implicitly has an 'any' type because expression of type 'any' can't be used to ...

reactjstypescript