Trigger an event when the menu is outside the viewport and then lock the menu to the top of the viewport

I am trying to create a menu element that remains fixed at the top of the browser viewport as the user scrolls, ensuring it is always visible. In my webpage layout, the menu sits below some text in the header initially. Once the user scrolls past the header, I want the menu to become fixed to the top of the viewport, allowing it to remain visible. The menu should return to its original position when the user scrolls back up to reveal the header again.

Update: The design specifications require the menu to be positioned below the header to display an important message before the menu options. It should only become fixed at the top of the viewport after scrolling past the header.

I believe I may need JQuery to achieve this functionality. Can someone provide some examples or guidance on how to implement this?

<html>
<body>
<header id="header">Header text...
   <menu id="menu"><a href="/">Home</a> | <a href="/Help">Help</a></menu>
</header>
<section id="more">More text...</section>
</body>
</html>
javascriptjqueryhtmlcss

Answer №1

This serves as a demonstration of how jQuery can be utilized to achieve a specific effect. To further understand its functionality, consider adding 4 or 5 paragraphs beneath your header and observe how the script operates. For a visual representation, refer to the example on CodePen below.

HTML: 

<header>
    <div class="logo">STICKY MENU ON SCROLL!</div>
    <div class="intro">Insert tagline here</div>
    <div class="menu">Menu content - home - links - etc.</div>
</header>

CSS:

.logo {font-size:40px; font-weight:bold;color:#00a; font-style:italic;}
.intro {color:#777; font-style:italic; margin:10px 0;}
.menu {background:#00a; color:#fff; height:40px; line-height:40px; letter-spacing:1px; width:100%;}

JS: 

$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);

function stickIt() {

var orgElementPos = $('.original').offset();
orgElementTop = orgElementPos.top;

if ($(window).scrollTop() >= (orgElementTop)) {
// user has scrolled past the original position; show only the sticky cloned element now.

orgElement = $('.original');
coordsOrgElement = orgElement.offset();
leftOrgElement = coordsOrgElement.left;
widthOrgElement = orgElement.css('width');
$('.cloned').css('left', leftOrgElement+'px').css('top', 0).css('width', widthOrgElement).show();
$('.original').css('visibility','hidden');
} else {
// user has not yet scrolled past the menu; continue displaying the original menu.
$('.cloned').hide();
$('.original').css('visibility','visible');
}
}

VIEW THE DEMO HERE

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

Error encountered in ASP.NET MVC application when using jQuery POST method: data is null

I am currently utilizing a PartialView and injecting it into a <div> from another PartialView to create a popup modal using the Bootstrap Modal. Although my Bootstrap Modal is displaying correctly, it is not functioning as intended. The following are ...

javascriptjqueryajaxasp.net-mvctwitter-bootstrap

The resend email feature isn't functioning properly on the production environment with next js, however, it works seamlessly in the development environment

import { EmailTemplate } from "@/components/email-template"; import { Resend } from "resend"; const resend = new Resend("myApiKey"); // this works only in dev // const resend = new Resend(process.env.NEXT_PUBLIC_RESEND_API_KE ...

javascriptreactjstypescriptnext.jsresend.com

What is the best way to grasp the concepts behind MaterialUI styled components?

Can someone please help me understand how to apply styles to a component using MaterialUI? I've been reading the documentation but it's all very confusing to me. What exactly are classes and how do I connect the const style to the BeerList compon ...

cssreactjsmaterial-ui

Waveform rendering in HTML5 using wavesurfer.js struggles to handle large mp3 files

Recently, I was considering incorporating wavesurfer.js into one of my projects so I decided to explore the demo on To test it out, I uploaded a large mp3 file (approximately 2 hours long) onto the designated area in the middle of the page. It appeared to ...

javascripthtmlhtml5-audioweb-audio-api

What is the best way to navigate users to a different page when they click on a button?

I recently designed a button in Dreamweaver software. Could you please guide me on how to set up the button so that when clicked, it redirects the user to a different page using Dreamweaver? Below is the HTML code for the button: <input type="submit" ...

htmlcssbuttonhyperlinkdreamweaver

What is the best way to exclude empty fields from an API response when using the .map() function in Nextjs

I've created a custom repository API that I want to integrate into my Next.js web application. However, if any field in the API is empty, I need to exclude that particular element. The contents of my API: { "myrepo": [ { ...

javascriptnode.jsreactjsnext.js

What is the best way to retrieve the border-color inline style using jQuery?

I have a HTML tag like this. <span id="createOrderFormId:accountNo" style="border-color: red;"><</span> To retrieve the style value for the border-color property, I tried using the following jQuery code: $( document ).ready(function() { ...

javascriptjqueryhtmlcss

When the user clicks, a modal window will appear with a loading animation using

I'm struggling with this code and it's not functioning as expected. Any assistance would be greatly appreciated. $("#Picture1, #Picture2, #Picture3, #Picture4").click(function() { $('#loading').hide().ajaxStart(function() { $(this).s ...

jqueryajaxmodal-dialogloadinggif

Why do style assignments lose their motion when executed right after being made?

If you take a look at this specific fiddle in Webkit, you will see exactly what I am referring to. Is there a way to define the style of an element when it is first specified, and then its final state? I would like to be able to fully define a single-ste ...

javascripthtmlanimationcss

Color Your Plone Website with a Custom JavaScript Colorscheme

Currently, I have implemented a custom theme by registering the javascript in the skin.xml file and then creating a specific folder within the browser to store the script. Below is the script shared by one of the users: $(document).ready(function(){ ...

javascriptjqueryplonecolor-scheme

Grab the SVG and resize it to a smaller scale

I have a small application built using Raphael.js that creates a node network with SVG and reorganizes it based on user selections. My goal is to capture the SVG image I've created and display it in a "mini-map" format at the bottom of the screen. Si ...

javascripthtmlsvgraphael

Working on executing various methods with a JavaScript client on a Flask RESTful API that requires authentication

I'm currently developing a JavaScript client-side app to interact with a Flask RESTful API. I've implemented some methods that require user authentication, but for some reason, even after logging into the server, I receive a 401 error (Unauthoriz ...

javascriptajaxrestauthenticationflask

Immersive viewing experience

I am facing an issue with my full-screen bootstrap CSS website. The website appears normally, but the problem arises when Google Chrome or Internet Explorer shows the useful links bar. Is there a way to have the website display in full screen even when th ...

htmlfullscreen

Investigating the Hierarchy of CSS Selectors

I've been pondering this question: What exactly is the functional distinction between these two code snippets, if any? I'm not certain how the use of a comma impacts statements. Does the #page > have an influence on the link in the first example? ...

csscss-selectors

The header element in JSP is concealed prior to the page being fully loaded

I have a basic login page titled login.jsp that includes header and footer content. The header content is stored in pageheader.jsp which consists of the header body tag, etc. I am looking to hide the header and footer elements specifically on the login pa ...

jqueryjsp

Changing color when mouse hovers using Jquery

Currently, I am in the process of converting a flash ad into an html5 ad. I found this demo here, and I would like to replicate the mouse hover effect showcased. When the cursor hovers over the details text in the banner, the entire background changes to ...

javascriptjquerycsshtml

How can multiple buttons be added to each row in Jquery datatables and how can events be applied to them?

I currently have one button, but I am in need of two buttons. These buttons will trigger MySql commands when clicked to retrieve data from the database. How can I set up an event handler for these buttons? $(document).ready(function () { var table= ...

javascriptjquerymysqldatatables

Why is it that lists always begin outside of the enclosing element?

I've always found this incredibly frustrating. Why do lists behave this way? When you set the margin and padding to 0, you would expect them to align normally with the surrounding text on the left, right? But no. That's where the text within the ...

htmlcsshtml-lists

Is it possible to develop a function that can verify various input values and modify their appearance as needed?

I am currently working on creating a form and faced with the challenge of simplifying my code using a function. Specifically, I want to write JavaScript code that will check all input fields in the form to ensure they are filled. If any field is left emp ...

javascriptloopsfor-loopinputsimple-form

I need to change a website into a string so that I can analyze it with javascript. How can I do this?

Currently, I am in the process of creating a website for my video game servers. The admin tool we use outputs the current server status in a .json format as a large text string to this specific URL: My goal is to retrieve the entire text string from the p ...

javascriptjsonstringapiparsing