Prevent navigation bar from appearing within the top 2em of the viewport

My website has a navigation bar that begins at the bottom left of the page. I would like it to pause 2em from the top of the viewport when scrolling up.

<script>
  var mn = $(".main-nav");
  mns = "main-nav-scrolled";

  $(window).scroll(function() {
    if( $(this).scrollTop() > 1000 ) {
      mn.addClass(mns);
    } else {
      mn.removeClass(mns);
    }
  });
</script>

I am struggling with the formula for setting the distance from the top. Instead of using 1000, I want it to stop 2em from the top.

javascriptjqueryhtmlcss

Answer №1

Give this a shot!

Implement the store function after like so.

<script>
  $(window).scroll(function() {
    var  mn = $(".main-nav");
    mns = "main-nav-scrolled";
    if( $(this).scrollTop() > 1000 ) {
      mn.addClass(mns);
    } else {
      mn.removeClass(mns);
    }
  });
</script>

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

React function does not provide a return value

In my function, I am calculating the current sum of elements. Within my Api, there is a method called Getcoin that works correctly when I log each element during the foreach cycle. However, I am not getting any results in the return statement or console.lo ...

javascriptreactjs

organize multiple blocks in the middle of the page (html)

This code is unique and belongs to me. <html> <head><title>HOME||~All About EDM~</title> </head> <body > <center><img src="edm1.jpg" alt="edm" width="950" height="250"></body></center> <c ...

htmlcssblock

Received undefined response from Axios.get() request

While working with the code below, I encountered an issue. The axios get request from await axios.get('/products/api') is functioning properly and I can see the data in the console. However, for await axios.get('/users/api'), 'Unde ...

javascripthtmlnode.jsreactjsexpress

Uploading files from iOS device with the original file name

Currently, I am using a basic HTML file upload snippet that functions on iOS devices. However, I have encountered an issue where the uploaded file is always labeled as 'image.jpeg'. Is there a method to retrieve the original filename, for example ...

iosiphonehtmlfile-uploadupload

Loading jsp content into a div dynamically within the same jsp file upon clicking a link

Currently, I am working on creating a user account page. On this page, my goal is to display related JSP pages in a div on the right side when clicking links like 'search user' or 'prepare notes' on the left side. In my initial attempt ...

javascriptjqueryhtmljspiframe

Error in nodejs application: abortTransaction cannot be called after commitTransaction has been called

I'm currently facing a perplexing issue with the mongodb driver that has left me scratching my head. Allow me to provide some background information. I am in the process of creating an NFT collection ranker endpoint. In order to achieve this, I am st ...

javascriptnode.jsmongodb

Identifying whether a class exists on the same level using a selector

Snippet display: $( document ).ready(function() { //$(".tree-node").parents('.tree-child-folders').css("color", "red"); //$(".tree-collapsed:has(.tree-child-folders)").css("color", "red"); $(".tree-node > .tree-collapsed:has(.tree-child ...

jqueryhtmlcss

XMLHttpRequest Error: The elusive 404 code appears despite the existence of the file

This is the organization of my project files: The folders Voice, Text, and Template are included. https://i.stack.imgur.com/9un9X.png When I execute python app.py and navigate to localhost http://0.0.0.0:8080/, the index.html page is displayed with conte ...

javascriptpythonajaxxmlweb.py

Struggling to adjust the quantity of items in a basic shopping cart when adding multiples of the same item

Hello there! I'm currently working on a project where I need to increase the quantity of each item added to the cart if it's already in there. This is actually my first time posting, so any tips on asking better questions would be greatly appreci ...

javascriptarraysreactjs

Creating a login form using HTML, PHP, and MySQL: A step-by-step guide

UPDATE [13.10.16] After revisiting a previous question of mine on stackoverflow that has low reputation, I realized the reasons behind it and decided to update it to make it more relevant. When I initially asked this question, I was attempting to create ...

phphtmlmysql

What causes ngDoCheck to be triggered upon setTimeout resolution?

I'm pondering why ngDoCheck gets triggered when setTimeout finishes. Here is a simple component setup I have: @Component({ selector: 'app-child', templateUrl: './child.component.html', styleUrls: ['./child.component.css ...

javascriptangularsettimeoutangular-changedetectionzone

What is causing it to give me 'undefined' as the result?

Trying to execute a script, test.al(); and within test.al, it calls getcrypt.php();. The php script is hosted on a webserver, and it is functioning properly. Here are the current scripts being used: JS var getcrypt = { php: function () { $.a ...

phpjavascriptjqueryajaxscope

Controlled Checkbox Component in React

I'm really struggling with this. While I can easily work with select drop downs and text fields, I just can't seem to get checkboxes to function properly in a controlled manner. I want them to 'toggle' and respond to events in a parent ...

javascriptreactjs

Converting a JavaScript hash into a single object: A step-by-step guide

I have an array of objects in the following format: var log=[ { billkey:"Name", billvalue:"ABC" }, { billkey:"Department", billvalue:"Computer" }]; and I want to convert it into a single object like this: var log={ "Name":"ABC", " ...

javascriptarraysobject

Display several modal pop ups using AngularJS

I'm currently using AngularJS and I have a requirement where I need to check if a student ID exists in the database when a user clicks a button. If the student ID is found in the database, I want to display #modal1, otherwise show #modal2. Is it achie ...

javascriptangularjs

Saving a PHP form with multiple entries automatically and storing it in a mysqli database using Ajax

My form includes multiple tabs, each containing various items such as textboxes, radio buttons, and drop-down boxes. I need to save the content either after 15 seconds of idle time or when the user clicks on the submit button. All tab content will be saved ...

javascriptjqueryhtmlajax

Retrieving information from Firebase Database using Express

I am trying to access data from a Firebase Database. I have set up my server.js file in the following way: var http = require("http"); var firebase = require("firebase"); var express = require("express"); var app = express(); var routerProj = require(". ...

javascriptnode.jsfirebaseexpressfirebase-realtime-database

A guide on transferring CSS module generated classes to components in Vue

Looking to implement CSS Modules, however, it appears that vue does not have a built-in method to pass generated class names to child components. Consider the scenario with two components: Table.vue TableRow.vue With styles like this: .table { table ...

javascriptcssvue.jsvuejs2

An issue occurred while attempting to read words from JSON file

My current issue involves loading words from JSON into my webpage. The images are functioning properly, thankfully. I have already successfully loaded the necessary images through JSON onto my webpage. However, I am still in need of loading words through ...

javascriptjqueryhtmlcssjson

adjustBounds and expand - appearing in an entirely new location

var classBounds = new google.maps.LatLngBounds(); var query = ""; query = "SELECT 'ROAD_NUMBER', 'geometry' FROM [TABLE_REFERENCE_ID] WHERE 'ROAD_NUMBER' CONTAINS IGNORING CASE '" + searchString + "' AND 'LINK_ ...

javascriptajaxgoogle-maps-api-3fitbounds