Checking the opacity with an if/else statement, then adding a class without removing the existing class

This function is designed to check the opacity of the header, which fades out as a user scrolls down. If the opacity is less than 1, it disables clickability by adding the class "headerclickoff". However, there seems to be an issue with removing the class. Can anyone spot what might be wrong with my code?

function disableHeaderClick(){
  var opacity = $("header").css("opacity");
if ( opacity <= 1) {
    console.log("working");
  $("header").addClass("headerclickoff");
} else {
  $("header").removeClass("headerclickoff");
};
};
javascriptjquerycss

Answer №1

The opacity values range from 0...1, so your condition will always evaluate to true.

Consider adding the class if the opacity is less than 1, rather than just less than or equal to.

function headerclickoff() {
    var opacity = $("header").css("opacity");
    if (opacity < 1) {
        console.log("working");
        $("header").addClass("headerclickoff");
    } else {
        $("header").removeClass("headerclickoff");
    }
}

You could also utilize toggleClass for this task.

function headerclickoff() {
    var opacity = $("header").css("opacity");
    console.log('opacity', opacity);
    $("header").toggleClass("headerclickoff", opacity < 1);
}

Check out the demo: Fiddle

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

What is the best way to transform an array of objects into a nested array through shuffling

I am dealing with a diverse array of objects, each structured in a specific way: data = [ { content: { ..., depth: 1 }, subContent: [] }, { content: { ..., depth: 2 ...

javascriptarraystypescript

Struggling with adding headers in React application

When I try to include an h1 heading, either the heading doesn't show up if I comment out the buttons, or if I comment out the heading, then the buttons don't display. But when both are included, nothing is displayed. Any suggestions on how to fix ...

javascriptreactjs

Grab a hold of the currently active controller in Angular

Is it possible to access a reference to the current instance of the controller from within its definition? My goal is to use `$compile` to create a modal and have it bound to the same controller that initiated its creation. Below is an example of what I w ...

javascriptangularjscontrollerself-referencelexical-scope

Get the png image file and display a preview of it

Within my template, I have an img tag that is linked to a state known as "imageBuffer" <img v-bind:src="imageBuffer" alt="" /> In the logic of the page, there are two file inputs and I've utilized a single function to manag ...

javascriptformsimagevue.jsfilereader

I'm having trouble inserting text into a three.js scene

I recently started working with three.js and I'm experimenting with some basic code. However, I keep encountering the same error message. I was under the impression that I added the object to the scene after using the loader.load function, so I'm ...

javascriptthree.js

Cease animation upon hovering

I have an animated footer that opens, stays open for 5 seconds, and then closes. I want to prevent the closing animation if the mouse is over the footer. Below is the code snippet: if(jQuery('body').hasClass('page-template-template-home&ap ...

jquery

Access nested JSON data through the use of a datatable

I have been attempting to find a solution, but I keep encountering errors. Can someone please assist me? Here is the JSON data: { "siteList": [ { "siteName": "Site1", "deviceList": [ { &quo ...

jquery

Obtain Relative URL with the help of Selenium using the PhantomJS driver

Utilizing Selenium along with the Phantom JS driver, I am attempting to load an HTML page and extract all of the HREF links from it. The issue arises when PhantomJS provides absolute URLs after resolving them entirely. My specific requirement is to extrac ...

javascriptselenium-webdriverphantomjs

The "as" property in NextJS Link does not properly reload the page when opened

I recently started using NextJS and I have a question about its router. I want to link to a page, but I would like the URL to be different. <Link href="/About/About" as="/about-page"> <a> Who We Are <im ...

javascriptreactjsnext.js

Utilizing Javascript's Mapping Functionality on Arrays

Here is an array that I need help with: var gdpData = {"CA": 1,"US": 2,"BF": 3,"DE": 4}; I am trying to retrieve the value associated with BF using a loop Can anyone provide guidance on how to accomplish this using either JQuery or Javascript? ...

javascriptjquery

Is the z-index useless when the button is positioned behind divs and other elements?

I would like the "Kontakt" button to appear in the top right corner of the page, always on top of everything else. I have tried setting the z-index to z-index: 99999999999 !important;, but it doesn't seem to be working... On desktop, the button displ ...

javascriptjqueryhtmlcss

Revitalizing and rerouting page upon button click

The issue at hand is: When the "Post now" button is clicked, the modal with the filled form still appears. If the button is clicked again, it adds the same data repeatedly. I aim to have the page refresh and navigate to a link containing the prediction d ...

javascriptjqueryangularjsfirebase

Is there a way to transform a string into a human-readable slug?

Is there a way to convert a slugified string into a more human-readable format? I am extracting parameters from a URL: bookmark/10/disco%20asdasd From this, I have the name "disco%20asdasd". However, this is not easily readable so I need to change it to ...

javascriptnode.jsslugify

Is there a way for me to automatically go back to the home page when I press the back button on the browser?

My ecommerce website has a shopping cart page where customers can purchase products and make payments. After the payment is completed, they are directed to a thank you page. The flow of the website is as follows: Home page => Products => Shopping ca ...

phpjavascriptjqueryajax

What steps can I take to verify that all textboxes are filled and checkboxes are selected before allowing the user to submit the form?

Here is the JavaScript code and a snippet of the HTML that I am using to create a form. I am having trouble figuring out why the form can still be submitted even when there are empty fields. Ideally, a dialog box should pop up indicating which fields nee ...

javascriptjqueryhtmlforms

Error: The function styles$1.makeStyles is not defined

Currently, I am experimenting with rollup for bundling. However, when I run the code, I encounter the following problem: https://i.stack.imgur.com/8xLT3.png import { makeStyles } from '@material-ui/styles'; const styles = makeStyles({ subHead ...

javascriptreactjsmaterial-uinext.jsrollup

What could be causing the React state (array) to be empty within a callback function? Why is it failing to utilize the latest value from the external

I'm facing a challenge that has me stumped. I am attempting to add values to an existing array, but for some reason, the 'state' variable is always empty inside the onmessage callback function. I can't seem to figure out why this is hap ...

javascriptreactjscallbackreact-hooksserver-sent-events

Caution: It is important for each child within a list to have a distinct "key" prop when using react-input

I'm currently facing an issue with the following code snippet: {array.map((item) => ( <> <input key={item.id} type="checkbox" /> ...

javascripthtmlreactjs

Using the Set function to compare distinct elements within different arrays

Update: After reviewing the link shared by faintsignal, it appears to be the most suitable answer. It not only clarifies why this behavior is happening but also provides a solution to the issue at hand. I am currently working with an array and trying to d ...

javascriptset

Vue.js v-for dynamically creates HTML blocks that capture the state of collapse with two-way data binding

I am currently working on capturing the click action state within an HTML v-for generated block for a collapsible function. I have set up a data table and it seems that the state is being captured correctly. However, I am facing an issue where the displa ...

javascriptvue.jsvuejs2