Add design to the footer during a specific event using Javascript

Here is the CSS code I am working with:

.footer {
  font-family: "lato", sans-serif;
  padding: 20px;
  line-height: 1.2;
  text-align: right;
  background: #eee;
  color: #0D47A1;
  font-size: 13px;
  height: 80px;
  position: fixed;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: 10;
  transition: all 500ms;
}

.footer.scrolled {
  transform: height(100px);
}

I am trying to achieve the functionality where the footer on an HTML page disappears when a user scrolls down. I attempted to implement this using JavaScript by adding the following script to my HTML page:

function hideFooter() {
                if(window.pageYOffset > 10) {
                    .footer.addStyleName("scrolled");
                } else {
                    .footer.removeStyleName("scrolled");
                }
        }

Additionally, I included the following in my HTML body tag:

<body onload="onload()" onscroll="hideFooter()">

Although the function triggers properly when scrolling, it does not apply the desired style changes to the footer. I am currently unable to determine the reason why.

javascripthtmlcss

Answer №1

Make sure to utilize the appropriate JavaScript functions, such as classList.add and classList.remove.

function hideFooter() {
    const footer  = document.getElementsByClassName('footer')[0];
    if(window.pageYOffset > 10) {
        footer.classList.add("scrolled");
    } else {
        footer.classList.remove("scrolled");
    }
}

Additionally, check out the following link for a visual demonstration of the issue and solution: TestWise Replay | StackOverFlow QA - Apply style to footer on event in Javascript

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

Ways to extract the ASP.net variable value and place it inside a JavaScript textbox

Currently, I'm in the process of developing Javascript code for an ASP.net page. Within my coding framework, the string "foo" is linked to a string variable called myString. In order to transfer the value of myString to a JavaScript variable, I incl ...

javascriptasp.net

What could be causing the Bootstrap4 modal to not display data on my Django Template?

Looking for a solution to display data in the modal body using django variables. I'm new to ajax and django, so struggling with it. The ajax function sends the id of the Galeria object, and then the view returns a JsonResponse with the data. Why is th ...

javascriptpythondjangoajaxbootstrap-4

Displaying limited items based on conditions in CSS

If there are 10 <p> tags, is it possible to limit them to only 5 by hiding the other 5 using CSS? Do I need to add a class five times with nth-child? Can CSS accommodate conditions for this purpose? Considering that the number of <p> tags is ...

css

What is the best way to address a row of hyperlink text located at the top of a webpage?

I have encountered an issue where three rows of text links near the top of a page shift up to the very top when a link is pressed, causing them to obscure a line of text that was already at the top. How can I keep the position of these three rows anchored? ...

htmlcsshyperlinkalignment

React Native: Troubleshooting Issue with Shallow Copying of Nested JSON Objects

I have a JSON structure with nested objects like this: {"name", "children": [JSON objects]}. I am attempting to add a new child to the object based on a variable path, which is an array of names. Strangely, my code works fine in the Ch ...

javascriptjsonreact-nativereferenceshallow-copy

Encountered an error while trying to create module kendo.directives using JSPM

I am attempting to integrate Kendo UI with Angular in order to utilize its pre-built UI widget directives. After running the command jspm install kendo-ui, I have successfully installed the package. In one of my files, I am importing jQuery, Angular, and ...

javascriptangularjskendo-uiecmascript-6jspm

Troubleshooting the Issue of PHP Variables Not Being Assigned to Javascript Variables

I am currently struggling with an issue. I am trying to assign a PHP value to a variable in Javascript. Here is what I have attempted: <script> JSvariable = <?php echo $PHPvariable; ?>; </script> However, this approach is not yieldi ...

javascriptphp

Well, it appears that I am having trouble establishing a connection between the users in this chatting application

I'm encountering a problem with establishing a connection between two users. I have already installed express and socket.io, but for some reason, the message is not getting through to the receiver's end. The code seems to be running fine as I can ...

javascripthtmlcssjson

Encountering a 403 error while attempting to install Meteor with npm using the command npm install -

Following the installation instructions provided on the official Meteor website at , I encountered an error while trying to install Meteor using the command "npm install -g meteor". Here is the detailed error message: os 　win 10 pro node -v 　v14.15.1 n ...

javascriptnode.jsnpmmeteormeteor-blaze

Styling of Bootstrap HTML element not appearing as expected

Recently, I've been trying out a new approach by embedding Bootstrap components in an iframe. However, despite loading the necessary stylesheet and scripts, the elements seem to be missing their styles. Can anyone shed some light on why this might be ...

javascriptangulartypescript

Trouble with displaying the NVD3 sample chart

I seem to be missing something simple... I've copied the code for an nvd3 example exactly, but I'm getting a blank page without any error messages. Both the nvd3 and d3 libraries are showing up when I check in the console by typing "nv" or "d3", ...

javascripthtmld3.jsnvd3.js

When it comes to printing, the @media rule for portrait orientation will not be effective if landscape orientation is also indicated

My goal is to create a div that will occupy the entire A4 page when printing, regardless of whether portrait or landscape mode is selected in the print dialog window. test.html: <!DOCTYPE html> <html lang="en"> <head> <me ...

htmlcssmedia-queries

Retrieving data from an HTML input tag and storing it in a variable

I'm currently working on a project that involves reading the contents of an uploaded file through an input tag and storing it in a variable. My goal is to then use an algorithm to decrypt the .txt file: <input type="button" value="decrypt" id="dec ...

javascripthtmljqueryhtml-input

What is the reason for using <div class="clear"></div> instead of <div class="clear"/>?

It dawned on me that: <div class="clear"/> can wreak havoc on the layout after a sequence of floating divs, whereas <div class="clear"></div> works perfectly fine. Does anyone have an explanation for this? Here is the CSS being used ...

htmlcsscss-float

What is the best way to limit input to only numbers and special characters?

Here is the code snippet I am working with: <input style="text-align: right;font-size: 12px;" class='input' (keyup.enter)="sumTotal($event)" type="text" [ngModel]="field.value" (focusin)="focusin()" (focusout)="format()" (keyup.ente ...

javascripthtmlangular

The JSON.Parse function in Google Apps Script is leading to a 'server connection error' message during debugging

I'm not a professional developer, but I do code occasionally. Currently, I am working on some Apps Script code to interact with an API and store the data in SQL. Most of it is working fine, but I have encountered an issue while debugging in the Apps S ...

javascriptjsondebugginggoogle-apps-scriptgoogle-apps-script-editor

Is it possible for Carousel to showcase a different layout other than tables or items? And is there a way to customize

I'm trying to use Bootstrap 5 to display items in a row, like sets of 3 or 12, and have them slide into view one set at a time. However, when I add a carousel, the items end up stacked on top of each other. Here is the code snippet: <div c ...

htmlcsscarouselbootstrap-5

The Autocomplete feature in Material UI React includes both a "Select All" and a "Select

How can I add Select All and Select None buttons to an Autocomplete component in Material UI React? The goal is for all the options to be checked when Select All is clicked, and for all options to be unchecked when Select None is clicked. <Autocomple ...

javascriptreactjsmaterial-ui

Stop Browsers from Saving the Current Page in the History Log

Currently, I am facing an issue with a user-triggered popup window on my website that redirects to another site. It is important that users do not access this page directly and only navigate to it if the popup window opens as intended. mysite.com -> my ...

javascriptbrowserpopupbrowser-history

Communication between parent and child elements in jQuery

I am developing a plugin that focuses on the manipulation of checkboxes. However, I am currently facing an issue. After retrieving JSON data, I need to establish connections between children and parents. Each child contains a "data-parent" attribute with a ...

javascriptjqueryjson