Adding a class to the page content for sticky navigation when scrolling

I have a script that I'm trying to modify, but it's not working as expected. Can someone assist me with this issue?

window.onscroll = function() {myFunction()};
  
var navigation = document.getElementById("navigation");
var sticky = navigation.offsetTop;
  
function myFunction() {
  if (window.pageYOffset > sticky) {
    navigation.classList.add("sticky");
  } else {
    navigation.classList.remove("sticky");
  }
}

Currently, the script adds the class "sticky" to the navigation element. However, I would like to add the class "padding-page" to the "page-content" element within this function and remove it afterwards. This is necessary because the sticky navigation changes the layout, causing the "page-content" section to shift an additional 48px towards the top.

htmljquerycssonscroll

Answer №1

Solved the problem:

window.onscroll = function() {myFunction()};

var header = document.getElementById("header");
var intro = document.getElementById("intro");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky"); intro.classList.add("padding-intro");
  } else {
    header.classList.remove("sticky"); intro.classList.remove("padding-intro");
  }
}

Just added an id for the initial content and applied padding-intro to it :) Works like a charm

Answer №2

Give this a shot.

window.onscroll = function() {myFunction()};

var menu = document.getElementById("menu");
var stickingPoint = menu.offsetTop;

function myFunction() {
  if (window.pageYOffset > stickingPoint) {
    menu.classList.add("stuck top-padding");
  } else {
    menu.classList.remove("stuck top-padding");
  }
}

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

Using HTML and CSS, change the background color to red based on the value of each cell in a forEach loop

Need help with my HTML/CSS code. I have a table where I need to change the background color of any row that has a cell value of "Not Approved" while using a foreach loop in Google Apps Script to send an email with two tables. What is t ...

htmljquerycss

Save a JSON object from a URL into a JavaScript variable using jQuery

I am trying to figure out how to use the .getJSON() function to store a JSON object as a JavaScript variable. Can someone guide me through this process? var js = $.getJSON(url, function(data) {...} ); Is it necessary to include the function(data) { ...

javascriptjqueryjson

trouble fetching ajax information

Help needed with ajax data retrieval issue on different browsers: Success in IE 7/8 Failure in FF 3.5/3.6, Chrome 5.0.375.70 The jquery code snippet used is pretty basic: $.get('http://myhost/someurl',function(data) { if (data) { ...

jqueryajax

The Javascript code fails to execute after other scripts have been employed

Trying to create an expanding search bar that expands upon button click and collapses when clicking elsewhere on the page. The issue I'm facing is that everything works well initially, but after the second script hides the input field on a click outsi ...

javascripthtmlcssweb-deployment

Issue with Vue2's v-text functionality

Recently, I've delved into Vue2 and encountered a problem with form submission and validation on a single page. The issue lies in the error display process – I want errors to be shown beneath each form input as soon as they occur, rather than waitin ...

javascripthtmlvuejs2

Adding Logging Features in ASP.NET

I am currently working with an .ascx file that contains both JavaScript and div elements. I need to add a log statement inside a function for troubleshooting purposes. Can someone please guide me on how to achieve this? Below is a snippet of my code: fu ...

javascripthtmlasp.netloggingascx

Listening for a click event on a newly added element using JQuery

I am relatively new to using JQuery and I have encountered an issue with adding a click event listener for a dynamically created button. When the user clicks on the first button, my function successfully adds a second button to a div. However, I am facing ...

jqueryhtmlonclick

Having trouble toggling classes with mouseup in Wordpress Underscores theme

While I'm utilizing Underscores as the foundation theme for my website, one aspect that I particularly appreciate is its incorporation of a functional mobile navigation component. However, since my site is essentially single-page, the navigation remai ...

javascriptphpjquerywordpressunderscores-wp

Dynamic stacking of buttons in response to user navigation choices

Is it possible to create a navigation bar with 5 buttons using CSS and JS? Here is what I am looking to achieve: Display 5 nav/button options When a user clicks on a button, the other buttons should transition or hide, leaving only the selected button vi ...

javascripthtmlcss

Issue with CakePdf unable to properly render CSS styling

I am having issues with the CakePdf Plugin (CakePdf.DomPdf) as it is not recognizing my stylesheet. Despite copying my /View/Layouts/default.ctp to /View/Layouts/pdf/default.ctp, the pdf file generated does not reflect the styling. Could this be due to t ...

csscakephp

The wp_mail function is exclusively designed to send plain text

I have encountered an issue while using the wp_mail() function to send HTML formatted emails. Despite setting the headers to indicate "Content-Type: text/html; charset=UTF-8", all the emails appear as plain text without any formatting. While testing on Wi ...

htmlwordpressemail

Troubleshooting: My Bootstrap collapse navbar refuses to cooperate

Hi there! I'm working on creating a responsive navbar with Bootstrap, but I'm having trouble getting the collapse feature to work. Can someone please assist me? Here are the lines of code I have: <nav class="navbar navbar-expand-md navba ...

htmlbootstrap-4

Using JQuery to create a button inside a Modal dialog box

My goal is to select a row within a Table that is located inside a Modal window, and then have a button ('newBtn') within that Modal window trigger a post request to the server with the selected id of the row. However, the issue I am encountering ...

javascriptjqueryflaskbuttonmodal-dialog

WP Ajax failing to work in the else statement

I am currently developing a WordPress plugin that includes a special feature. This feature involves a checkbox that, when checked by a user, saves a specific value in the database using ajax. Conversely, when the checkbox is unchecked, the value should be ...

phpjqueryajaxwordpress

Storing data from an HTML table in a view using MVC4 - a step-by-step guide

Currently, I have an HTML table displayed on a webpage where users can input data at runtime. My goal is to store all the rows from this table into a database through the use of a controller. It's similar to how a WinForms application would save multi ...

c#jqueryajaxasp.net-mvc-4

Is the fixed header see-through?

I have a query regarding my website design. Currently, the fixed header on my site is transparent and when I scroll down, the content overlaps the header. However, I want the header to remain above the content. Can anyone provide assistance with this issue ...

htmlcss

Is it possible to replicate jQuery's method of creating custom events in vanilla JavaScript?

Hey there! I'm interested in creating events in JavaScript similar to how jQuery does it. Does anyone have insight on how jQuery accomplishes this? I've noticed that using vanilla JavaScript like this: var myEvent = new CustomEvent("userLogin", ...

javascriptjqueryandroid-browsercustom-events

Obsidian Gemstone Adorned with Pearl-Colored Query Symbol

In my code snippet, I am utilizing this: $("#myDiv").load("getTweet.php?tweet_id="+tweet_id+"&yes="+yes+"&no="+no); This call fetches a tweet, but instead of single quotation marks, I see black diamonds with white question marks. I attempted usi ...

jqueryajaxutf-8

When switching between classes, it is not possible to apply a different value to the same CSS property

I am currently working on a project that involves toggling a class on a ul tag with an id of sideNav using JavaScript. In this scenario, I have set the left attribute of the id to 0, while the same attribute in the class has a value of -100%. After sever ...

javascripthtmlcss

Attempting to incorporate images alongside menu items

Here is a list of menu items. Please take note that I have assigned the image class to the City menu item. <p:submenu label="Address"> <p:menuitem value="Country" url="/secured/country.xhtml?redirect=true" /> <p:menuitem value="Stat ...

htmljsfprimefaces