Guide to Creating a Scrollable/Fixed Menu using CSS and JavaScript

How can I create a scrolling/following menu using CSS and Javascript?

I've been experimenting with a scroll/follow menu on this specific page, . The menu is contained within a modal window. After looking at various examples on stackoverflow, the closest one I found was:

http://jsfiddle.net/c0pnrvc6/

However, there are issues when scrolling up, and I feel like there's more to it that I'm missing. I have researched extensively on Stackoverflow and other platforms, trying out different implementations. Could you please review my code below and guide me in the right direction?

Html

<div class=scroller>Xtango</div>

CSS

.scroller {
position: relative;
top: 0px;
width: 100%;
background-color: rgba(255, 255, 255, 0.68);
z-index: 1}

Javascript

$(window).scroll(function() {
if ($(window).scrollTop() > 0) {
$('.scroller').css('top', $(window).scrollTop()); } });
javascripthtmlcssscrollmenu

Answer №1

Consider utilizing -1 in place of 0.

$(window).scroll(function() {
  if ($(window).scrollTop() > -1) {
    $('.scroller').css('top', $(window).scrollTop());
  }
});

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

Angular UI-Router: Customizable template for dynamic content

My goal is to dynamically load a navbar based on the user, but I am facing difficulties accessing my $rootScope. $stateProvider /*Login*/ .state('login', { url: '/', data: {pageTitle: 'Sign in.'}, ...

javascriptangularjshtmlangular-ui-routerstate

Error: The name property is not defined and cannot be read in the Constructor.render function

Having trouble building a contact form and encountering an error when trying to access the values. I've checked for bugs in the console multiple times, but it seems like something is missing. Can anyone provide assistance? var fieldValues = { ...

javascriptreactjs

Is there a way to retrieve the values of a checkbox from a location outside the form where it is initially defined?

After successfully developing a script that deletes rows from a table when a checkbox is selected, I encountered an issue where the values of the checkboxes were not accessible outside of the form action they were placed in. The checkboxes and correspondin ...

javascriptphphtml

Is there a way to incorporate a loading spinner into a MaterialUI DataTable without having to specify a fixed height for the parent component?

Currently, I am using a MaterialUI DataTable with the following setup: <div style = {{height: 300}}> <DataGrid loading={true} getRowHeight={() => "auto"} getEstimatedRowHeight={() => 250} ...

javascriptreactjstypescriptmaterial-ui

Extracting information from a webpage with no specific identifiers such as name, id, or class linked to the

I am currently attempting to monitor the delivery status of shipments and have it displayed on an Excel tab. Through this specific website , relevant data appears once the "Air wayBill No." is input. I successfully launched Internet Explorer, entered th ...

htmlexcelvbaweb-scraping

Eager loading BelongsToMany results in retrieving multiple objects for every association

Within my application, I have established two models: User and EconomicActivity. These models are linked together through a relationship called UserEconomicActivity, which uses a BelongsToMany association. In the User model, the association is defined as f ...

javascriptnode.jsormsequelize.js

Encountering the error message "Unexpected token export" while attempting to implement the "framer-motion" package with Webpack

My experience with NextJS has been smooth sailing until now. I recently added the "framer-motion" module to animate some components, and it caused a major issue. Whenever I navigate to a page containing the import statement: import { motion } from "fr ...

javascriptwebpackecmascript-6babeljsnext.js

Utilize separate environment variables for distinct environments within a React project

Is there a secure method to externalize all environment variables, including secret keys, for a React application within a DevOps setup? Our goal is to streamline the build process across different environments, each with its own unique set of environment ...

javascriptnode.jsreactjsdockerwebpack

Converting a TypeScript nested dictionary into a list of strings

I am currently working with a nested dictionary and my goal is to convert it into a list of strings. For example, the initial input looks like this: var group = { '5': { '1': { '1': [1, 2, 3], ...

javascriptangulartypescript

Executing background operations in Meteor.js

Let me lay out my situation: 1. Extracting data from example.com at regular intervals 2. Storing it in a Mongodb database 3. Subscribing to this data in a Meteor App. Since I'm still learning Meteor, here's my plan: 1. Develop a scraper script ...

javascriptmeteor

Vue click event does not function when used with an anchor tag containing an href attribute

Looking for a way to create an anchor tag that executes a click handler instead of following the href attribute when clicked. Currently working with Vue 1 and my code is as follows: <div v-if="!hasPage(category.code)"> <div> <templat ...

javascripthtmlvue.jsseo

Issues with ASP.Net and uploading files using HTML5 XHR

Trying to use HTML5's XMLHttpRequest to upload a file has been challenging for me. Below is the code I have been using: var xhr = new XMLHttpRequest(); xhr.open("POST", "receive.aspx", true); //xhr.setRequestHeader("Content-Type", "multipart/form-da ...

javascriptasp.nethtmlfile-upload

Do we need to utilize a server folder in Nuxt 3 if we have API endpoints?

In Nuxt 3, there is a dedicated server folder containing an api subfolder. Why should we utilize this when we already have API endpoints built with a server-side programming language like Laravel? Are they linked in any way? For instance, consider these ...

javascriptvue.jsvuejs3nuxt.jsnuxt3

Sending properties in NextJS from the server side (Application routing)

In order to share data for each request, I have created an object with this data in the rootLayout. export interface IProps { children: React.ReactNode; data: any; } export default function RootLayout(props: IProps) { const {children} = props; ...

javascriptreactjsnext.jsnext.js13

What is the method for activating -webkit-animation/transition-property for :before and :after pseudo elements?

Is there a way to activate the -webkit-animation for :before and :after pseudo elements? It seems that in this demo http://jsfiddle.net/4rnsx/, the animation is not working for :before and :after elements. I am attempting to make it work using Mootools ...

csswebkitcss-transitionspseudo-element

Web scraping with Cheerio in Node.js sometimes yields undefined results

When attempting to extract data from NSE website, I initially tried using the inspect element console: (Edited the question) https://i.sstatic.net/Xq8mZ.png objs = $('div[class="table-wrap"] > table > tbody > tr > td').slic ...

javascriptnode.jscheerio

A PHP download button that does not require submitting back to the page

Having an issue with my code provided below: <?php if(empty($_POST['download_button']) === false && isset($_POST['download_button'])){ header('Content-Description: File Transfer'); header('Content-Type ...

javascriptphpjqueryhtmldownload

Encountered an error in Next JS and Graph QL where attempting to destructure the property 'data' from an undefined intermediate value

I am encountering an issue while attempting to make a Apollo request to the SpaceX API. I am receiving a 500 (Internal Server Error) and also at getStaticProps. It's unclear whether this is a syntax problem or an error in my method of implementation. ...

javascriptnode.jsreactjsgraphqlnext.js

Even when there is a change in value within the beforeEach hook, the original value remains unchanged and is used for dynamic tests

My current project setup: I am currently conducting dynamic tests on cypress where I receive a list of names from environment variables. The number of tests I run depends on the number of names in this list. What I aim to achieve: My main goal is to manip ...

javascripttypescriptcypress

Calculating the duration of time using JQuery with provided start and end times

I am currently utilizing a jQuery time picker to gather start and end times in a 12hr format. My goal is to calculate the time duration between the start and end times in HH:MM:SS format. The code snippet I have below is providing me with a duration like ...

phpjavascriptjquery