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

What is the best way to update the values of an array of object properties using an input form in JavaScript?

I'm currently learning node.js, express.js, and handlebars I am working on creating two forms for a blog/news page: an add form and an edit form. /addproject: app.get('/addproject', function(req, res) { res.render('addprojec ...

javascriptnode.jsexpresshandlebars.js

Tips for contacting the giveaway host after the giveaway has finished

I am currently utilizing the Discord Giveaways module. I am interested in learning how to send a direct message to the host of the giveaway once it has ended. I haven't quite figured out how to do that yet. Here is what I have gathered so far: manag ...

javascriptnode.jsdiscord.js

There is no result being returned by Model.findOne()

Why does Model.findOne() return null even when a valid collection is present in the respective Model? app.post("/fleetManagement", (req, res) => { const requestedDriverID = req.body.driverId; console.log(requestedDriver ...

javascriptnode.jsdatabasemongodbmongoose

Loading Ajax image while rendering partial views in MVC 3

Recently, I've been using Html.RenderPartial(usercontrol, model) to display my user controls. I'm wondering if there's a way to enhance this functionality by incorporating an Ajax loading image while the partial view loads? UPDATE: Attempte ...

jqueryasp.net-mvc-3

Tips for transmitting information from the main window to a child in JavaScript

Being relatively new to JavaScript, I am attempting to transfer a value entered into an input text field on a parent window to its child window when a button on the parent window is clicked. The parent window features an input field for entering a number a ...

javascriptbuttonwindowparent

Material-UI: Eliminate the missingOppositeContent:before element from TimelineItem

I'm currently using Material-UI to construct a timeline. Here is the code snippet I am working with: <Timeline align="right" className={classes.monthlyContainer}> <TimelineItem > <TimelineSeparator className={class ...

cssreactjsmaterial-ui

Converting Mat-Raised-Button into an HTML link for PDF in Angular 6 using Material Design Library

Greetings, I have a couple of interrelated inquiries: Upon clicking the code snippet below, why does <a mat-raised-button href="../pdfs/test.pdf"></a> change the URL (refer to image 4) instead of opening test.pdf in a new window? If I have a ...

htmlangulartypescriptangular-material2

Creating a layout with three rectangular shapes using HTML and CSS

What is the most effective method to achieve the following layout using HTML/CSS: +---------+---------------------------------------------------+ | my | Home About Categories Donate | | best +---------------------------------- ...

htmlcsspositioning

Off-center alignment in left margin with Bootstrap 3

When using bootstrap 3, I have noticed that the left margin starts to indent gradually with each row. Here is a screenshot demonstrating the issue: please see here The code for the first two rows in the image looks like this: <div class="row"> ...

twitter-bootstrap-3htmlmargins

Adjustable icon dimensions in Material-UI

My current setup involves utilizing material-UI icons <ArrowRightAlt/> I have been able to manipulate the size of the icon using the fontSize attribute <ArrowRightAlt fontSize="large" /> However, I am interested in having the size ...

cssreactjsmaterial-ui

Saving the subtracted value from a span into a cookie until the checkbox is unchecked - here's how to

I am working on a piece of code that includes numeric values within a span. When the checkbox is clicked, it subtracts 1 from the main value, essentially reducing the total value. How can I achieve this so that even after the form is submitted, the deducte ...

javascriptphpjqueryhtml

Double submission with JQuery .post

I am struggling to prevent this JQuery POST call from being submitted twice. I have attempted various versions of unbind but do not fully comprehend how it works. While I have come across similar queries, they only mention using unbind without delving int ...

jqueryajaxpost

Is there a way to incorporate background images into the <option> tags within a <select> dropdown menu?

Not sure if browsers support this feature. It works fine in a div, but that's not very semantically correct. Here is a rough mockup of what I'm trying to achieve: Mockup Link /* CSS for select elements on page */ select { position: relative ...

css

The use of WebSockets in conjunction with text encoding techniques

After reviewing the material, I came across this information: The WebSocket API allows for the use of a DOMString object, which is transmitted in UTF-8 format, or it can also accept an ArrayBuffer, ArrayBufferView, or Blob objects for binary data transf ...

javascriptwebsocket

Material UI AppBar displaying custom colors instead of theme colors

Currently, I am utilizing Material UI version 4.7.0. In my project, I have established a customized theme (shown below) by utilizing createMuiTheme() method with personalized primary and secondary colors set. Within my AppBar component (also displayed be ...

javascriptreactjsmaterial-ui

What could be causing my Bootstrap navbar menu item to move to the line beneath it when there is centered text?

I've implemented a basic Bootstrap navbar from the example provided on the Bootstrap website at . However, when I tried to add custom text to the center of the navbar, it caused the "Contact Us" menu item to break onto two lines instead of staying on ...

htmlnavbarbootstrap-5

Detecting collisions between two squares in an HTML5 canvas

class Snake { constructor() { this.x = 400; this.y = 400; this.width = 25; this.height = 25; } draw() { ctx.fillRect(this.x, this.y, this.width, this.height); } } let snake = new Snake(); class ...

javascripthtml5-canvas

troubles with downloading using the <a> tag

I attempted to create a personalized file name for user downloads, but I am having trouble using ${} in the process. My goal is: let foo = "name" let fileName = `${name}footer.html` <a download={filename} className="btn btn-info">Download</a> ...

htmlanchor

NextJS is throwing an error stating that the function file.endsWith is not recognized as a valid

After upgrading from nextJS version 9.x.x to 12.x.x, I encountered the following error. Any assistance would be greatly appreciated. TypeError: file.endsWith is not a function at eval (webpack-internal:///./node_modules/next/dist/pages/_document.js ...

javascriptnext.js

Having difficulty accessing and updating data in a database while using Discord.js

My goal is to enable staff to respond to the last direct message (DM) by using ~reply <message> instead of ~dm <userID> <message>. However, before I can do that, I need to store the user's ID in a database to identify the last person ...

javascriptnode.jsdiscord.js