Tips for creating a sticky or fixed Mega Menu that remains in place when scrolling

I have been experimenting with a Mega Menu code snippet that I found on this codepen link. Here is a small example of the menu HTML structure:

<div class="content">
    <ul class="exo-menu">
        <li>
            <a class="active" href="#">
                <i class="fa fa-home"></i>
                Home
            </a>
        </li>  
        <li>
            <a href="#">
                <i class="fas fa-hand-holding-usd"></i>
                Link 1
            </a>
            <div class="contact"></div>
        </li>
        <a href="#" class="toggle-menu visible-xs-block">|||</a>        
    </ul>
</div>

Additionally, here is the JavaScript function associated with the menu:

$(function () {
  $('.toggle-menu').click(function(){
    $('.exo-menu').toggleClass('display');      
  });
});

Although this menu works fine, I am interested in making it sticky at the top when scrolling.

javascripthtmljquerycsstwitter-bootstrap-3

Answer №1

Implementing the "Fixed" class on a scroll event can be a helpful way to fix the header using some CSS.

$(document).ready(function () {
        $(window).scroll(function(){
          var sticky = $('.content'),
              scroll = $(window).scrollTop();

          if (scroll >= 50) sticky.addClass('fixed');
          else sticky.removeClass('fixed');
        });
    });
 // CSS styles here
 
<!DOCTYPE html>
<html>
<head>
    // Add meta tags, links, and script sources as needed
</head>
<body>
      <div style="text-align:center;margin-top:25px;marin-bottom:15px;font-weight:bold;texxxt-decoration:none; color:#484848;">
    // Content goes here
</div>


 
    // Additional styling for fonts and icons


</head>

<body class="background">
     <div class="content">
     
        <ul class="exo-menu">
            // Menu items
        </ul>
     
     
     </div>
     <section style="height:100vh"></section>
         <section style="height:100vh"></section>
     
    </body>
</html>

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

Exploring the search feature within Redux and React-Native

The search functionality in redux is giving me some trouble. I have written the following code for it, but strangely enough, it's not working properly. Interestingly, the same code works perfectly when used without redux. searchItems: (name ) => ...

javascriptreactjsreact-nativereduxreact-redux

Looping through a nested for loop within an HTML table

I am currently working on generating a dynamic table using Lists of varying sizes. My first list is a List of Cars List<Car>. I have successfully placed the names of different car companies in the header. Next, I have a List<List<CarSales>& ...

javascripthtmlthymeleaf

What could be causing the issue preventing me from updating my SQL database through AJAX?

$(document).ready(function(){ $('.button').click(function(){ var clickBtnValue = $(this).val(); var ajaxurl = 'functions/delivered.php', data = {'action': clickBtnValue}; $.post(ajaxurl, da ...

javascriptphpjqueryajax

Ensure that the v-for attribute has an increased value

Is there a way to have an incremented value in this code snippet? :data-value="Math.round(elecs[index].obtenus/elecs[index].maxsiege*100) Here is my attempt at iteration : :data-value="Math.round(result += elecs[index].obtenus/elecs[index].maxsiege*100 ...

javascriptjsonvue.jsattrnuxt.js

Using CSS3 to style a span element as a circular shape with one half displaying a distinct background color

Hey there! I've come across a little challenge with an HTML layout - the tricky part is that I can only tweak the CSS, not the actual HTML structure itself. The goal is to create a circular design (like the one shown in the image) using the border-rad ...

cssless

How does React-router handle component reloading when there is a change in the state of the parent component

Within my React application, I've integrated a ResponsiveDrawer component sourced from material-ui's demo. This component essentially displays a drawer containing a list of menu items, a title bar, and a content frame. The state of the component ...

javascriptreactjsreact-routerstatematerial-ui

HTML5 coding can be enhanced by applying unique CSS rules for alignment purposes

html { font-family: "Open Sans", sans-serif; font-weight: 100; background-color: #fbfbfb; } body { font-family: "Open Sans", sans-serif; font-weight: 100; } body h1 { font-weight: 100; } body h3 { font-family: "Open Sans", sans-serif; fo ...

javascriptcsshtmlalignment

Custom service encounters an Angular provider error related to unknown providers

Below is my code for setting up the app and creating a controller: var app = angular.module('newstalk',[]); app.controller("articleCtrl",['$scope','$http','dataService',function($scope, ...

javascriptangularjsangularjs-service

I am trying to figure out how to dynamically set the deployUrl during runtime in Angular

When working with Angular, the definition of "webpack_public_path" or "webpack_require.p" for a project can be done in multiple ways: By setting the deployUrl in the .angular-cli.json file By adding --deployUrl "some/path" to the "ng build" command line ...

javascriptjsonangulartypescriptwebpack

Retrieve a JSON file from the local file system using AngularJS

I recently started learning AngularJS and I am trying to read a JSON file from my local system. However, when I attempt to do so, I encounter an exception error that says: "Access to restricted URI denied XMLHttpRequest." Here is the code snippet: var de ...

javascriptangularjsangularjs-directive

Tips on showcasing Java map information obtained from the backend on an Angular/Typescript interface

I have a 'detailsMap : any' variable from the backend that contains multiple rows in the format (key1,key2). I need to display this data in the UI using TypeScript/Angular2. Please advise on how I can achieve this. key1 : { Name:'ABC' , ...

javascriptangulartypescript

Changing the cursor while the onDrag event is active in ReactJs

I want to implement Drag functionality on certain elements in my application, but I am facing an issue where the cursor changes during dragging. How can I change the cursor specifically when onDrag is active? ...

javascriptcssreactjs

How come the button is shifting down even though it's set to display inline?

I've recently delved into the world of Bootstrap and CSS, but I'm facing a unique challenge. Despite my research efforts, I couldn't find a solution to my specific issue. I have a <div class="col-md-6"> where I've nested ...

htmlcsstwitter-bootstrapbootstrap-4

When using Node.js, attempting to require a JSON file may result in receiving an error

When attempting to save a JSON array to a variable, I encountered an error in node.js: { Error: Cannot find module 'jokes.json' Below is the code snippet: let jsonData = require('jokes.json'); var jokes = jsonData.jokes; The jokes.js ...

javascriptnode.jsjsonrequirediscord.js

Having issues with jQuery hover effects? Consider looking into these two common problems: 1. Is z-index causing any complications?

Do you think these issues would be better addressed separately, or should they remain together as one topic? The code in question can be found in this fiddle: http://jsfiddle.net/jhacks/xCcdn/89/. I felt it made sense to combine them into one discussion fo ...

jqueryhoverz-indexunbind

"Trouble encountered while trying to display Angular in an HTML document

In my Angular project, there is a feature where a list of orders is displayed in one view. Each order is represented by its title only. When the user clicks on the title, they should be redirected to a new view showing the complete content of that particul ...

javascripthtmlangularjs

What could be causing the consistent Mocha "timeout error" I keep encountering? Additionally, why does Node keep prompting me to resolve my promise?

I'm encountering a timeout error repeatedly, even though I have called done(). const mocha = require('mocha'); const assert = require('assert'); const Student = require('../models/student.js'); describe('CRUD Tes ...

javascriptnode.jsmongodb

Create a JSON list by preserving input values together in a PHP form

Currently, I have a JSON list containing conditions (items) and an associated color for each condition. My goal is to construct a form that allows me to update the conditions and then convert them back to JSON format. For instance: <?php ?> $JSO ...

phphtmljsonforms

Executing an MVC4 Ajax call will initiate the opening of a fresh webpage

After going through countless posts, I am still struggling to make this work in my new project. Despite having all the necessary scripts and seemingly simple tests, the unobtrusive setting in the webconfig, I am unable to get the actionlink to replace the ...

ajaxjqueryasp.net-mvc-4

Encountered an issue with the ProgressPlugin: TypeError - Unable to access property 'tap' of an undefined element

Encountering a Problem with npm run build Here's the issue at hand Compiling client E:\ui\sheraspace_ui\node_modules\webpack\lib\ProgressPlugin.js:223 compilation.hooks.addEntry.tap("ProgressPlugin", entryAdd ...

javascriptreactjswebpacknext.js