Tips on adjusting the colors of your menu and logo as you scroll

I currently have a fixed menu on my website, and I would like the header menu to change color to white when scrolling down. I have implemented this jQuery script:

jQuery(document).scroll(function(){
if(jQuery(this).scrollTop() > 300)
{   
   jQuery('#navigation').css({"background":"white"});
} else {
   jQuery('#navigation').css({"background":"transparent"});
}
});

I have added this code to my site that I am working on. However, the white background is causing all text to be overridden, only displaying text when it is close to the background. How can I make the logo appear in inverted colors while keeping the text black on a white background? I came across this CSS code:

-webkit-filter: invert(.8);
  filter: invert(.8);

I'm unsure how to include this in the jQuery script.

javascriptjquerycss

Answer №1

If you want to update the text color of your #navigation component, you can achieve it by following these steps:

jQuery('#navigation').css({"color":"black"});

UPDATE:
After reviewing your website, I have crafted a customized solution for you:

jQuery(document).scroll(function() {
  if (jQuery(this).scrollTop() > 300) {   
    jQuery('#navigation').css({"background":"white"});
    jQuery('.menu-item').css({"color":"black"});
  } else {
    jQuery('#navigation').css({"background":"transparent"});
    jQuery('.menu-item').css({"color":"white"});
  }
});

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 would you name this particular element?

I want to create a unique slider design but I'm unsure where to begin or how to search for information because I don't know the correct terminology. Does this type of slider have a specific name? I heard about Marquee, but that seems like someth ...

javascripthtmlcssweb

Error installing npm: Dependencies could not be loaded for installation

Currently, I am in the process of learning Angular JS by building a simple phonecat app. Following the steps, I have downloaded Node.js and attempted to execute the command: npm install An error has occurred: C:>npm install npm ERR! install Couldn&ap ...

javascriptangularjsnode.js

Dealing with CSS Overflow Issues: Fixing the Scroll Bug

My current project involves creating a page with fixed links at the top and submit buttons at the bottom. The content in the middle is scrollable using overflow:auto. I've noticed that when I resize the browser window, the scrollbar slowly disappears ...

css

Invoking a prototype method executes the incorrect function repeatedly

I'm currently diving into the world of structures and anonymous functions in JavaScript, and after examining various codes and libraries that implement this technique, I decided to give it a shot. However, when attempting to replicate the method they ...

javascript

Is it possible to assign multiple ID's to a variable in jQuery?

I am currently using a script for a slider known as Slicebox, and in order to have different image sizes for mobile and desktop views, I need to duplicate the feature on my website. Although it's not ideal, I really like this slider and want to explo ...

javascriptjquery

The Three.js OBJMTLLoader seems to have trouble loading textures from .mtl files

Having trouble with the OBJMTLLoader? While it successfully loads the model, the diffuse and specular maps are not loading. Below is the code snippet: .js file var loader = new THREE.OBJMTLLoader(); loader.load( 'models\\Stop_t ...

javascriptthree.js

Utilizing AJAX to transfer input information from JavaScript to PHP

After reviewing numerous discussions on stackoverflow related to this topic, I still cannot determine why the following code is not functioning as expected. The form in question is structured like this: echo "<td> <form action=\"admin.php& ...

javascriptphpajax

Obtain the value of the nth child in jQuery without referencing the HTML tag

I need to work with the number 1.99 in my calculations, but it is preceded by a dollar sign which is subject to change. $(function() { const x = $('#test').text(); console.log(x); console.log(Number(x) + Number(x)); }); <script src="https://cd ...

javascripthtmljquerywordpresswoocommerce

Retrieve the ID from either a search query or an insertion operation in MongoDB

I find myself frequently using this particular pattern. It feels a bit cumbersome to make two MongoDB calls for the task, and I am curious if there is a more efficient way to achieve this. My goal is to obtain the ID of an existing document, or.. create ...

javascriptmongodbmeteor

Struggling with aligning an image and text side by side in CSS

Struggling to get my text and image perfectly aligned horizontally? Despite being aligned, the image makes it seem otherwise. https://i.stack.imgur.com/u1QOh.png CSS Code: /* Copyright © 2016 Dynavio Cooperative */ .navbar { width: 100%; border ...

htmlcssimagecentervertical-alignment

arranging select options in alphabetical order

One of the questions posed to me in an interview was about sorting a select option. The options were listed as follows: <select> <option>aaa</option> <option>ccc</option> <option>ddd</option> <option>bbb< ...

javascriptjqueryhtmlsorting

The functionality of jQuery smooth scrolling to an anchor is only effective when the page is at the top and there is

Currently, I am working on designing a simple one-page website featuring a fixed menu that smoothly scrolls to specific sections on the page upon clicking the menu items. However, I have encountered an issue where the scrolling works perfectly only when t ...

javascriptjqueryhtmlcss

tips for efficiently using keyboard to navigate through tabs in an unordered list

Utilizing unordered lists in this web application. I am looking to implement tab navigation with keyboard functionality. How can I achieve this? The first tab should contain text boxes, and when the user fills out a text box and presses the tab key, they s ...

javascriptjqueryhtmlcssjquery-ui

pdfMake introduces a page breaking effect when the canvas is utilized with the type "line"

Can anyone shed some light on why a canvas declaration with the type "line" is causing a page break in the generated PDF? I've tried removing all canvases and the page break disappears, but I can't identify the root cause. Any insights would be ...

javascriptangularpage-breakpdfmake

What could be causing the issue with uglify not functioning properly with AngularJS content?

I've created some gulp tasks to assist in building my web project. One of the tasks involves minifying js files. Here is the task code snippet: gulp.task('minify' , function() { console.log('Copy minified js '); return gulp ...

javascriptangularjsgulpgulp-uglify

Modify the custom attribute value assigned to an image

I am facing an issue with a document containing two thumbnail images (front and rear, like a bank check). I have successfully implemented zoom functionality on the front image by displaying a square part of the original large image. However, when I click o ...

javascriptjquery

Tips on keeping the width and height in proportion to a 16:9 aspect ratio across all screen sizes

I am trying to keep the height and width proportional to a 16:9 aspect ratio on any screen size. The problem I am encountering is: I have a video on my website that follows a 16:9 aspect ratio format, with a width of 1280 and a height of 720. I calculate ...

javascriptaspect-ratio

Integrating a real-time chat feature on a website

Considering adding a live chat support feature to my website specifically for new users seeking information about my services. I've been contemplating the most effective way to incorporate this solution without relying on third-party options. My idea ...

javascriptjqueryajaxchat

Next.js directs API requests to the root URL

I'm currently working with an API handler pages/api/[slug]/[uid].ts My goal is to redirect the requests to the main root of my application, specifically: http://localhost:3000/[slug]/[uid] What steps do I need to take in next.config in order to mak ...

javascriptnext.js

The React-native-vision-camera is unable to connect to the rear-facing camera

Currently, I am facing a challenge using the 'normal' camera on my iPhone 11 Pro. I have implemented react-native-vision-camera in my project. When executing the following code: const devices = useCameraDevices(); const deviceBack = devices.back; ...

javascriptiostypescriptreact-native