Adjusting the transparency level of a Bootstrap 3 navbar background using javascript

I am having trouble adjusting the opacity of an element as I scroll down a page. Despite my efforts, the background color of the element remains unchanged.

$(document).on('scroll', function (e) {
    $('.navbar-default').css('background-color: rgba',"70","103","26",($(document).scrollTop() / 550));
});

This is my CSS code:

.navbar-default {
   /* background-color: #1b1d2a;  */
    background-color: rgba(70,103,26,0.1);
    border-color: #1b1d2a;
}

The issue seems to stem from my lack of understanding regarding how to manipulate the specific style 

background-color: rgba(70,103,26,0.1);
using the jQuery .css() API documentation, even though I have seen similar methods work in other examples.

You can view the fiddle here

javascriptjqueryhtmlcss

Answer №1

$(document).on('scroll', function (e) {

     var beta = $(document).scrollTop() / 650;

     $('.header-nav').css('background-color', 'rgba(80, 123, 36,' + beta + ')');
});

JSFiddle Demo

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 causes the inaccessibility of methods added via decoration?

Let's say I have a Directive decorator that adds a static method called factory to its target: function Directive<T extends { new (...args: any[]): {} }>(constructor: T) { return class extends constructor { static factory(...args): ng.IDi ...

javascripttypescript

What is the best way to eliminate opacity in an element using react dnd?

When I use react-dnd to drag an item, the element being dragged becomes almost completely opaque. I would like to increase its visibility, is there a way to achieve this? In the image below, the upper element is the one being dragged and the bottom one is ...

javascriptreactjstailwind-cssreact-dnd

Issue with BlueImp JQuery Upload: File Queue Not Being Cleared Post Upload

I am currently facing two issues that seem to be related. My situation involves using BlueImp's Upload plugin to upload multiple files to an ASP.NET MVC controller, which then returns the necessary JSON response upon completion. The uploading process ...

jqueryajaxfile-uploaduploadblueimp

The reset css code appears to be overridden by the user agent stylesheet

I've been developing a project using Next.js. I attempted to reset the CSS in my _app.tsx file and here is my _app.tsx code: import type { AppProps } from 'next/app' import GlobalStyles from '@/styles/GlobalStyles' export defa ...

cssnext.jsresetemotion

position text to the right side of a slider gallery created with JavaScript

I'm currently utilizing a WordPress plugin known as Slideshow Gallery and I want to position the text below it to float next to the gallery on the right side. I've attempted the following: .bioText{ font-size: 14px; font-size: 1.428571429rem; ...

javascriptjquerywordpressslidercss-float

What are the steps to clear a client's local cache after updating my website?

Is there a simple way to clear the cache of all players who have previously played my game? The game stats are stored in local storage, and some players experienced bugs when the stats were incorrect. This outdated data is now affecting the updated stats ...

javascripthtmlcss

Encountering a lack of data in the request body when posting in Express.js

Here are my two attached files. I am encountering an empty response from req.body. Index.html file: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQ ...

javascriptnode.jsexpress

"Error message: Undefined index error when trying to decode JSON

In my database, there's a JSON file named articles.json which contains data as follows: { "articles": [ { "id": 1, "title": "a" } ] } Now, I have written a script to decode this JSON file: <?php include "inc/header. ...

phphtmlarraysjson

Trouble with displaying ChartsJS Legend in Angular11

Despite thoroughly researching various documentation and Stack Overflow posts on the topic, I'm still encountering an odd issue. The problem is that the Legend for ChartsJS (the regular JavaScript library, not the Angular-specific one) isn't appe ...

javascriptangularchart.js

"The issue with jQuery not functioning properly is isolated to a particular HTML file

I'm encountering a strange issue with jQuery as a beginner. It seems that my jQuery code is not functioning properly on the HTML file I created for the website's homepage. Surprisingly, when I test the same jQuery code on a blank HTML file, it wo ...

jqueryhtml

The validation for Australian mobile numbers should include the option to have spaces between the digits

How can I validate a mobile number properly? The first text input should start with 04 It should have a total of 10 digits, including 04 (e.g. 0412345678) Below is my input field: <form name="uploadForm"> <input type="tel" name="MobileNumber" ...

javascriptangularjsregexangularjs-ng-pattern

Linking two socket.io clients together (Establishing a direct socket-to-socket connection that works across different browsers)

Can a direct P2P connection be established between two browsers using socket.io-client, bypassing the node.js server they are currently connected to? If possible, how? The goal is for clients A and B to communicate directly without going through the node. ...

javascriptnode.jssocketsexpresssocket.io

Elevate Your Navbar's Hamburger Menu with Font Awesome SVG in React-Bootstrap!

Currently working with React-Bootstrap to create a Navbar. I have a desire to swap out the default hamburger menu icon provided by React-Bootstrap with a Font Awesome hamburger icon. Wondering what steps need to be taken in order to change the existing bu ...

csstwitter-bootstrapnavbarfont-awesomereact-bootstrap

Different option to chained promises

In an attempt to develop a function that acquires a presigned s3 URL (call 1) and performs a PUT request to s3, I find myself contemplating the usage of a nested promise structure, which is commonly recognized as an anti-pattern. Outlined in JavaScript/ps ...

javascriptes6-promise

Vue Js warning for changes that have not been saved

Trying to notify the user about any unsaved modifications in my Vue component's beforeRouteLeave (to, from, next) route hook. I want to showcase this prompt on navigation or reload: https://i.sstatic.net/Qga1Z.png https://i.sstatic.net/fONR8.png My ...

javascripteventsvue.jsalertdom-events

Launching apps from the background using React Native deep linking

After enabling deep linking, everything seems to be working fine when the application is opened. However, I've encountered an issue when trying to open the app from a background state using the URL moderatorapp://hello. While it logs the correct URL, ...

javascriptreact-nativereact-native-ios

Incorporating a parameter into a <div> only when the parameter holds a value

Being new to web development, I have a rather basic query. If the datainfo prop variable is not empty, I'd like to include a data attribute in the div tag. <div style={{height: props.height - handleHeight()}} data={datainfo ? datainfo : ""}> C ...

javascriptreactjstypescriptjsx

Hover over the text below to see an image appear in its place

I'm looking to swap out some text with an image when hovering over it, using basic HTML/CSS. NO: show the image below the text NO: display the text on top of the image NO: replace one image with another YES: replace the text with an image ...

htmlcss

Create a choppy distortion effect using CSS filters in Google Chrome

Currently working on a hover effect that enhances image brightness and scales the image during hover. However, I am experiencing some choppiness in the transform animation due to the CSS filter. It's strange because it appears to be smooth in Safari a ...

cssgoogle-chromepugstylus

Challenges encountered when using Tailwindcss and Nextjs with class and variables

Hey there, I'm currently facing a major issue with tailwindcss + nextjs... The problem lies in setting classes using a variable. Although the class is defined in the css, tailwind fails to convert it into a style. This is how I need it to be: https ...

cssreactjstypescriptnext.jsclassname