Designing a dynamic and interactive floating navigation bar

I've been experimenting with creating a floating menu using SMINT. The idea is to have the menu stay visible as you scroll down the page.
The issue I'm facing is that the current menu structure uses divs. I would like to switch to using li and ul elements for a more standard menu, but when I make this change, the menu no longer stays fixed while scrolling down; Demo.
I've seen examples of floating menus built with ul lis at Infinity Network Floating Code. These menus work well when scrolling down the page.
It seems like there may be an error in my code preventing it from functioning correctly.

Q: What could be causing the issue in my code or how can I fix it to achieve the desired functionality?
Thank you in advance.

javascriptjqueryhtmlcss

Answer №1

Your website is missing the necessary javascript logic to enable a scrolling menu feature. To fix this, you need to implement a script that detects when the user is scrolling and updates the menu position accordingly.

Start by assigning an id to your <ul> element:

<ul class="subMenu" id="submenu">

Next, add the CSS properties position: absolute and a z-index to your subMenu class:

.subMenu {
    position: absolute;
    z-index: 100;
}

Finally, insert the following JavaScript code at the end of your webpage:

var submenu = document.getElementById('submenu');
var scrollTimer;
window.onscroll = function() {
    submenu.style.visibility='hidden';
    clearTimeout(scrollTimer);
    scrollTimer = setTimeout(function(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        submenu.style.visibility='visible';        
        submenu.style.top=parseInt(scrollTop)+'px';
    }, 500);
}

This implementation will also provide a desired delayed effect (you can adjust the timeout value for different results).

For reference, you can view a demonstration on this JSFiddle link (may lack some styling) -> http://jsfiddle.net/puzN4/

Answer №2

For the scenario you provided, one possible solution would be to assign the .submenu element with the CSS properties of position:fixed and z-index:99999

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

Deselect a checkbox that is already selected and choose the current option in the multiselect dropdown

I've created a code that allows for single select in a multiselect dropdown, disabling other options once one is chosen. However, I don't want to disable the checkboxes and would like to uncheck the selected option if a new one is chosen, all whi ...

javascriptjquerybootstrap-4drop-down-menumulti-select

I'm curious, what is the exact function of ...state?

Just dipping my toes into NgRx (redux) within Angular and I'm a bit puzzled by the use of ...state in the code snippet below. My understanding is that it functions as spread operator, but I can't grasp why the data attributes from the Interface S ...

javascriptangularngrx-store

What are effective ways to eliminate script tags from a webpage?

I have implemented tags on my website that users can use to interact with the site. My goal is to figure out how to make the browser only read text from a specific file I write, without any HTML. This should be restricted to certain sections of my websit ...

asp.netjavascripthtmlcss

Creating a Collage with Varied Image Sizes

Hey there, I'm trying to achieve something that seems simple, but I can't quite figure it out. What I want to do is query a table and display the results in two separate divs on my webpage. Here's an example of the HTML structure I have: &l ...

phphtmlmysqlcss

Efficiently storing and quickly retrieving data from a table for seamless echoing

Details I have created a table using ul and li. Here is the link to view the table: http://jsfiddle.net/8j2qe/1/ Issue Now, how can I efficiently store and display data like the one shown in the image? Each column should only contain one entry. Your r ...

phphtmlmysql

Dawn Break Alarm Timepiece - Online Platform

My buddy recently purchased a "sunrise alarm clock" that gradually brightens to mimic a sunrise and make waking up easier. I had the thought of replicating this effect with my laptop, but I've been facing issues with getting the JavaScript time funct ...

javascripthtmlcssweb

Activate a timer as soon as the page is first loaded. The timer must continue running from the initial load even if the user leaves

Looking to implement a time-limited offer on the first stage of our checkout process. The timer should start at 5 minutes when the page loads and continue counting down even if the user leaves the page and returns. Has anyone come across a script that can ...

javascriptphpjquerytimer

What could be causing the issue with perspective not functioning properly?

I'm attempting to create a simple 3D square shape. div { width: 300px; height: 300px; background: #333; transform: rotateX(50deg); -webkit-transform: rotateX(50deg); -moz-transform: rotateX(50deg); -ms-transform: rotateX(50deg); perspective: ...

htmlcss

Alert: Prop type error encountered - The prop 'open' must be defined in Snackbar component

Recently, I've been implementing jest snapshot tests into my application. The main focus is on the LoginForm component. render() { return ( ... <DynamicSnack dialogOpen={this.props.dialogOpen} snackOpen={this.props.sna ...

javascriptreactjsunit-testingmaterial-uijestjs

Using sql.js to import CSV files into SQLite databases

Is it possible to import a CSV file into a SQLite database using JavaScript instead of the command line? I am currently utilizing the sql.js library to work with SQLite in Javascript. I appreciate any help or suggestions on how to accomplish this task. Th ...

javascriptdatabasecsvsqlite

Interactive Audio Progress Bar in HTML5

Hello, I am trying to create a simple HTML 5 player with controls for play and pause. However, I am having trouble implementing a progress bar that interacts with the music time. I found an example of an interactive progress bar here: http://jsfiddle.net/ ...

jqueryhtmlaudio

Using a single package manager for both backend and frontend development - is it possible? (Yarn/NPM)

Before, I relied on NPM for server-side tasks and Bower for frontend. NPM would install packages in the node_modules/ directory, while a .bowerrc file directed package installations to public/lib. Recently, I've made the switch to Yarn from NPM, and ...

javascriptnode.jsnpmyarnpkg

Debounce function fails to properly function when the state is modified within the same function

I've been working on implementing a search-as-you-type feature and I want to debounce the function search that handles API calls. Everything works well when I only call the debounced_search function within the event handler, but I also need to update ...

javascriptreactjs

Tips for Styling "Opened" Elements within the <Summary><Details> Web Design in HTML using CSS? (a color coding challenge)

I've dedicated a significant amount of time crafting my ultimate HTML FAQ with detailed summaries styled in CSS. There's one aspect that continues to elude me - achieving the perfect orange background color for expanded topics: My goal is for a ...

htmlcsscss-selectorshtml-tag-detailshtml-tag-summary

Slick slider issue: Unexpected TypeError - the slick method is undefined for o[i]

I'm facing an issue where, upon clicking the search button, I want the previous search results to clear and new ones to be displayed. However, this action triggers a slick slider error, causing all items to align vertically instead of in the intended ...

javascriptjqueryhtmlajax

triggering controller on click event in JSP

Using a spring web application, I need to call a controller in a java file from a JSP file using an ajax function. How can I achieve this? <p class="bottom-slide-corners"> <a class="billing" href="#Billing"><spri ...

javascriptjavaspringjsp

"Upon calling an asynchronous method within another method, it appears that no progress is being displayed

I've created a `node-js` `db.js` class that retrieves an array of data for me. //db.js const mysql = require('mysql'); var subscribed = []; const connection = mysql.createConnection({ host: 'localhost', user: 'root' ...

javascriptmysqlnode.jsasync-awaitmqtt

Tap on the HTML5 video to exit the fullscreen mode

Objective I have successfully implemented a fullscreen video setup that triggers when a link is tapped on a mobile device. To maintain a clean aesthetic, I have hidden the HTML5 video controls using CSS. The desired functionality includes closing the full ...

javascripthtmljquerygoogle-chromevideo

In IE11, the property of table.rows.length is not functioning as expected

In my HTML page, I have the following script: var table = document.getElementById(tableID); var rowCount = table.rows.length; While this script works fine in IE8, in IE11 it does not return the exact row count. Instead, it only returns "0" when the actua ...

javascripthtml

Model is disregarding media queries

Using LESS for CSS compilation, I have encountered an issue with the media query in my code. Specifically, I am attempting to apply different styles for mobile devices but they are not being rendered as expected. #main-wrap header #hdr-nav nav { width: ...

cssresponsive-designmedia-queries