Adjust the color of static hyperlinks based on the background color

Is there a way to dynamically change the color of my fixed side links based on the background color when scrolling? I attempted to use CSS mixed-blend-mode: difference, but it does not provide the level of control I need. Therefore, I am looking to achieve this using jQuery. Any suggestions on how I can accomplish this?

Below is an example of my code:

.right-aside {
    position: fixed;
    z-index: 10;
    right: -10px;
    top: 100px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 180px;
    padding: 0; 
    font-size: 16px;
    line-height: 21px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    color: #fff;
    text-transform: uppercase;
    float:left;
    height: fit-content;
    }
.right-aside__menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.right-aside__menu ul li a {
    display: block;
    text-align: center;
    transition: all 300ms;
    color: #fff;
}

.left-aside {
    position: fixed;
    z-index: 10;
    left: -10px;
    top: 100px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: fit-content;
    padding: 0; 
    font-size: 16px;
    line-height: 21px;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    color: #fff;
    text-transform: uppercase;
    float:left;
    }
.left-aside__menu ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.left-aside__menu ul li a {
    display: flex;
    text-align: center;
    transition: all 300ms;
    color: #fff;
}
.left-aside__menu-item-link .uk-icon {
    margin-right: 10px;
    min-width: 20px;
}
.wrapper {
  height: 100%;
}
.wrapper div {
  height: 50vh;
}
.wrapper div:nth-child(2n+1) {
  background: green;
}
<div class="wrapper">
  <div></div>
  <div class="white"></div>
  <div></div>
  <div class="white"></div>
  <div></div>
</div>
<aside class="right-aside">
<nav class="right-aside__menu">
<ul class="right-aside__menu-list">

<li class="right-aside__menu-item ">
<a href="" class="right-aside__menu-item-link" title="phone">
<span class="right-aside__menu-icon">

</span>
<span class="phone-vertical">+7 777 777 77 77</span>
</a>
</li>

</ul>
</nav>

</aside>    
    <aside class="left-aside">
<nav class="left-aside__menu">
<ul class="left-aside__menu-list">

<li class="left-aside__menu-item ">
<a href="https://www.instagram.com/" class="left-aside__menu-item-link" title="contacts">
<span uk-icon="icon: instagram"></span>
<span class="phone-vertical">instagramaccount</span>
</a>
</li>

</ul>
</nav>

</aside>

javascripthtmljquerycss

Answer №1

To implement a scroll listener on your document and apply the following code:

$document.scroll(function() {
  if ($document.scrollTop() >= 50) {
    // The text color will change once the user scrolls past a certain position.
    $("element").addClass("blackColor");
  } else {
    $("element").removeClass("whiteColor");
  }
});

Answer №2

Here is a solution that has worked well for me:

$(window).scroll(function(){
  $('.aside-link').each(function(){
    var fixed = $(this);

    var fixed_position = $(".aside-link").offset().top;
    var fixed_height = $(".aside-link").height();

    var addClass = false;
    $('.white').each(function(){

        var toCross_position = $(this).offset().top;
        var toCross_height = $(this).height();

        if (fixed_position + fixed_height  < toCross_position) {
            //fixed.removeClass('white');
        } else if (fixed_position > toCross_position + toCross_height) {
            //fixed.removeClass('white');
        } else {
            addClass = true;
        }
    });
    if(addClass == true){
        fixed.addClass('dark');
    }else{
        fixed.removeClass('dark');
    }
  });
});
.right-aside {
    position: fixed;
    z-index: 10;
    right: -10px;
    top: 100px;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 180px;
    padding: 0; 
    font-size: 16px;
... (remaining code truncated for brevity)


<blockquote><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrapper">
  <div></div>
  <div class="white" id="test"></div>
  <div></div>
  <div class="white"></div>
  <div></div>
</div>

<aside class="right-aside">
<nav class="right-aside__menu">
<ul class="right-aside__menu-list">

<li class="right-aside__menu-item ">
<a href="" class="right-aside__menu-item-link aside-link" title="phone">
<span class="right-aside__menu-icon"></span>
<span class="phone-vertical">+7 777 777 77 77</span>
</a>
</li>

</ul>
</nav>
</aside>    

<aside class="left-aside">
<nav class="left-aside__menu">
<ul class="left-aside__menu-list">

<li class="left-aside__menu-item ">
<a href="https://www.instagram.com/" class="left-aside__menu-item-link aside-link" title="contacts">
<span uk-icon="icon: instagram"></span>
<span class="phone-vertical">instagramaccount</span>
</a>
</li>

</ul>
</nav>

</aside>

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

Sending variable data through AJAX: A comprehensive guide

After sending the variable data through ajax to the loading_add.php page, I encountered an error message: Uncaught ReferenceError: profit is not defined. Below is what I have attempted so far: var profit = ( Number($("#pro_price").val() - retail_pri ...

phpjqueryajax

Issues with jQuery autocomplete functionality on certain elements are not uncommon

I've been experimenting with creating a user script for Opera using Greasemonkey to implement autocomplete functionality on input elements within web pages. However, I've encountered some issues with the script not working as expected. Initially ...

javascriptjquerydomjquery-ui

Flexbox - managing wrapping on legacy devices

Utilizing flexbox, I have successfully designed a 2 column layout with a div at the top spanning both columns for a menu format. While this works flawlessly in Chrome and iOS7, it appears to be ineffective in outdated versions of Safari. In this fiddle, yo ...

htmlcssflexbox

Stop span elements from being removed within a `contenteditable` container

I am facing a challenge with an editable div that contains a span element which I would like to prevent users from deleting. My development environment is Vue3. Currently, if the user presses backspace while their cursor is to the right of the span or sel ...

javascripthtmlvue.js

What is the best way to extract valid objects from a string in JavaScript?

Currently, my data is being received through a TCP connection. To determine if a string is a valid JSON object, we use the following method: let body = ''; client.on('data', (chunk) => { body += chunk.toString(); try { ...

javascriptnode.js

How can I transform an ajax request into unobtrusive javascript?

Here is the ajax code I have: $('select#books_order').on('change', function() { $.ajax({ url: "/books/#{@book.id}", type: 'GET', dataType: 'script', data: { sort: $('#books_order option:s ...

jqueryruby-on-railsajaxruby-on-rails-4

Switch between two distinct menus (Reactjs + Material UI)

Recently, I designed a robust menu system that includes a Switcher feature. The concept is straightforward - if the switch is turned off, display the 1st menu; and if it's on, show the second menu. However, there seems to be an issue. When the switch ...

javascriptreactjsmaterial-ui

Steps for configuring mode as 'open' when generating a shadow element with vue-custom-element

Here is the method I used to generate a shadow component Vue.customElement('my-element', MyElement, { shadow: true, shadowCss: mystyles, }); ...

javascriptvue.jsvue-componentshadow-dom

Ways to delete an image from a batch file uploading feature

I encountered an issue with my multiple image upload function that includes preview and remove options. When I select 4 images and preview them correctly, removing 2 from the preview still results in uploading all 4 images to the database. $(document).rea ...

phpjqueryajaxhtml

Seeking the perfect message to display upon clicking an object with Protractor

Currently, I am using Protractor 5.1.1 along with Chromedriver 2.27. My goal is to make the script wait until the message "Scheduling complete" appears after clicking on the schedule button. Despite trying various codes (including the commented out code), ...

javascriptseleniumprotractor

Difficulty with info window within a for loop

I am currently working on implementing multiple info windows for markers. I found an example on Stack Overflow that I am trying to follow. Despite not encountering any errors in the console, the info windows do not appear as expected when clicking on the m ...

javascriptjquerygoogle-mapsinfowindow

In JavaScript, if you check for the existence of a key in an object, it

Recently, I ran into an issue with an undefined error when trying to access a value in a JavaScript object key. I retrieved arrays of objects using the mongoose.find().exec() callback and then checked each object for a specific key. Here is an example obj ...

javascript

Executing the slideToggle() function in JQuery with javascript

Trying to create a script that expands and collapses when users click on either the text or image. The image is a basic arrow that switches to an arrow pointing upwards when the div is expanded. The issue I'm facing is that the text disappears when t ...

javascriptjqueryslidetoggle

Creating checkboxes in an HTML table based on the output of a query

I'm currently working on creating a dynamic table that displays query results, and I have come across this code snippet that successfully generates the table. However, I would like to add an extra column to each row that contains checkboxes. Is there ...

phphtmlmysqlcheckboxhtml-table

Update the link to a KML file used by Google Maps when a button is clicked

On the initial page load, I want to showcase an 8 Day Average KML file on Google Maps. However, users should have the option to click on the "1 Day" and "3 Day" buttons to switch the reference in Google Maps from the "8 Day" file. The aim is to design a s ...

javascriptgoogle-maps

What exactly does the term "library" refer to in the context of jQuery, a JavaScript

I'm confused about the concept of a library - when it comes to jQuery, can it be described as a large file containing multiple plugins that are pre-made and ready for use? ...

javascriptjquery

Error in HTML5 video: Unable to access property '0' as it is undefined

I am trying to create a simple block displaying an HTML5 video tag. I want the ability to play different videos along with their titles from a JSON file by using previous and next buttons. Clicking the next button should play the next video, and the same g ...

javascriptjquerycsshtml

Utilize Next.js and GSAP to dynamically showcase images upon hovering over the title

I have a dynamic list of titles that I want to enhance by displaying images when hovering over each title. The issue I'm facing is that when I hover over one title, all the images display at once. As a React beginner, I believe the solution should be ...

javascriptreactjsnext.jsgsapuse-ref

Using a function as a prop in Vue js to retrieve data from an API

I am facing an issue with a component that I want to decouple from the data fetching implementation. My goal is to be able to pass a data fetching callback as a prop. The reason for this is so that I can easily mock the data fetching process in storybook. ...

javascriptvue.jsstorybook

A step-by-step guide on showcasing the content from a textfield onto a dynamic column chart

How can I show the value from a text field in a column chart? I found the code for the chart on this website(). I tried using the code below, but nothing happens. Can someone please assist me? <script> window.onload = function () { ...

javascripthtmlcharts