Search code examples
javascripthtmljquerycsstailwind-css

Using jQuery to color background, text and svg on scroll

I'm very much a novice here, but pushing myself to learn. I've been building a site from scratch using HTML, Tailwind CSS and (now) jQuery (after failing miserably with JavaScript) for the last few days. In my site I have a "navigation bar" and in this bar I have some text links and an svg icon that is also a link. I've added some neat hover effects like changing the color of the text links and having a line grow from left-to-right underneath those links. All that was working fine so I moved on to add an effect where once you scroll down the background-color of the navbar changes from transparent to white. The text links also change color from white to black. The trouble I am having and can't seem to figure out:

  1. I can't get the svg icon color change on scroll to work as expected. The on hover color change effect works, and I can get it to change from black to white after scrolling down then back up to the top...but I can't seem to set the default/starting color for this icon to be white without it overriding any scroll-color-change effects. As of now, it starts off black (which you can barely see it as the navbar sits on top of a darkish looping video).

  2. Whenever I scroll down and the jQuery script kicks in, the background and text links change color as expected, however I lose the on hover color change effect for the text links. Normally it changes from white to gold, but this is lost after scrolling. The animated growing underline still works though.

HTML & jQuery:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>
  
    <nav class="navigation h-20 sticky top-0 flex items-center justify-between flex-wrap p-6 z-20">
      <div class="flex items-center flex-shrink-0 mr-6">
        <a href="#" class="nav-item block mt-2 lg:inline-block lg:mt-0 hover:text-custom-gold">NAME GOES HERE</a>
      </div>
      <div class="block lg:hidden">
        <button cla ss="flex items-center px-3 py-2 border rounded text-white-200 border-white-400 hover:text-black hover:border-black">
          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
      </div>
      <div class="w-full block flex-end lg:flex lg:items-center lg:w-auto">
        <div class="text-base lg:flex-end">
          <a href="#responsive-header" class="nav-item block mt-2 lg:inline-block lg:mt-0 mr-9 nav-link-container">
            ABOUT
          </a>
          <a href="#responsive-header" class="nav-item block mt-2 lg:inline-block lg:mt-0 mr-9 nav-link-container">
            EXPERIENCE
          </a>
          <a href="#responsive-header" class="nav-item block mt-2 lg:inline-block lg:mt-0 mr-9 nav-link-container">
            CREDENTIALS
          </a>
          <a href="#responsive-header" class="nav-item block mt-2 lg:inline-block lg:mt-0 mr-9 nav-link-container">
            PORTFOLIO
          </a>
          <a href="#" class="linkedin-logo inline-block"> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" class="block mt-2 lg:inline-block lg:mt-0 nav-link-container" viewBox="0 0 16 16">
            <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
          </svg>
          </a>
        </div>
      </div>
    </nav>

  <div class="h-screen mx-auto bg-black flex flex-col items-center relative video-container">
    <video autoplay loop muted class="w-auto min-w-full min-h-full max-w-none absolute top-0 left-0 z-10">
      <source src="this is a link to a local video file (looping) which serves as the background for my navigation bar and first section" type="video/mp4" />Your browser does not support the video tag.</video>
  </div>

  <div class="h-80 mx-auto bg-green-300 flex flex-col justify-center items-center text-5xl">
      CONTENT TO BE ADDED
  </div>

  <div class="h-20 mx-auto bg-black text-white flex flex-col justify-center items-center text-5xl">
      CONTENT TO BE ADDED 
  </div>

<script>jQuery(document).scroll(function() {
  if (jQuery(this).scrollTop() > 80) {   
    jQuery('.navigation').css({"background":"white"});
    jQuery('.nav-item').css({"color":"black"});
    jQuery('.linkedin-logo').css({"fill":"black"});
  } else {
    jQuery('.navigation').css({"background":"transparent"});
    jQuery('.nav-item').css({"color":"white"});
    jQuery('.linkedin-logo').css({"fill":"white"});
  }
});</script>

</body>
</html>

CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

.video-container { 
  position: static !important;
}

.video-container video { 
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.nav-link-container {
  position: relative;
}

.nav-link-container::after {
  content: "";
  width: 0%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #e0bc75;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  transition: all .3s ease;
}

.linkedin-logo {
    fill:white;
}

.nav-link-container:hover::after {
  width: 100%;
}
  
.nav-link-container {
    position: relative;
}
  
.nav-link-container path {
    transition: fill 0.3s ease;
}

.navigation {
    background-color: transparent;
    color: white;
}

.nav-item {
    color:white;
}

.navigation:hover {
    color: #e0bc75;
    transition: all .3s ease
}

Maybe I'm just tired and need to take a break as I've been at it 10+ hours a day, but this is the only way I learn anything (obsessive focus). ;)

I think I covered this in the previous section, sorry I didn't realize there would be another section so I crammed it all into the first one! :)

Solution
    1. I was not able to replicate this issue.
    2. You could consider applying the coloring to the .navigation element and having the child elements inherit the color from this element. This would then still allow the .navigation:hover rule to display its effects.

    jQuery(document).scroll(function() {
  if (jQuery(this).scrollTop() > 80) {
    jQuery('.navigation').css({
      "background": "white",
      "color": "black"
    });
  } else {
    jQuery('.navigation').css({
      "background": "transparent",
      "color": "white"
    });
  }
});
    .video-container {
  position: static !important;
}

.video-container video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.nav-link-container {
  position: relative;
}

.nav-link-container::after {
  content: "";
  width: 0%;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #e0bc75;
  -webkit-transition: .3s;
  -moz-transition: .3s;
  -ms-transition: .3s;
  -o-transition: .3s;
  transition: all .3s ease;
}

.linkedin-logo {
  fill: currentColor;
}

.nav-link-container:hover::after {
  width: 100%;
}

.nav-link-container {
  position: relative;
}

.nav-link-container path {
  transition: fill 0.3s ease;
}

.navigation {
  background-color: transparent;
  color: white;
}

.navigation:hover {
  color: #e0bc75 !important;
  transition: all .3s ease
}
    <script src="https://cdn.tailwindcss.com/3.4.1"></script>

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./output.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

<body>

  <nav class="navigation h-20 sticky top-0 flex items-center justify-between flex-wrap p-6 z-20">
    <div class="flex items-center flex-shrink-0 mr-6">
      <a href="#" class="nav-item block mt-2 lg:inline-block lg:mt-0 hover:text-custom-gold">NAME GOES HERE</a>
    </div>
    <div class="block lg:hidden">
      <button cla ss="flex items-center px-3 py-2 border rounded text-white-200 border-white-400 hover:text-black hover:border-black">
          <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
        </button>
    </div>
    <div class="w-full block flex-end lg:flex lg:items-center lg:w-auto">
      <div class="text-base lg:flex-end">
        <a href="#responsive-header" class="nav-item block mt-2 lg:inline-block lg:mt-0 mr-9 nav-link-container">
            ABOUT
          </a>
        <a href="#responsive-header" class="nav-item block mt-2 lg:inline-block lg:mt-0 mr-9 nav-link-container">
            EXPERIENCE
          </a>
        <a href="#responsive-header" class="nav-item block mt-2 lg:inline-block lg:mt-0 mr-9 nav-link-container">
            CREDENTIALS
          </a>
        <a href="#responsive-header" class="nav-item block mt-2 lg:inline-block lg:mt-0 mr-9 nav-link-container">
            PORTFOLIO
          </a>
        <a href="#" class="linkedin-logo inline-block"> <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" class="block mt-2 lg:inline-block lg:mt-0 nav-link-container" viewBox="0 0 16 16">
            <path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854zm4.943 12.248V6.169H2.542v7.225zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248S2.4 3.226 2.4 3.934c0 .694.521 1.248 1.327 1.248zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016l.016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225z"/>
          </svg>
        </a>
      </div>
    </div>
  </nav>

  <div class="h-screen mx-auto bg-black flex flex-col items-center relative video-container">
    <video autoplay loop muted class="w-auto min-w-full min-h-full max-w-none absolute top-0 left-0 z-10">
      <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4" />Your browser does not support the video tag.</video>
  </div>

  <div class="h-80 mx-auto bg-green-300 flex flex-col justify-center items-center text-5xl">
    CONTENT TO BE ADDED
  </div>

  <div class="h-20 mx-auto bg-black text-white flex flex-col justify-center items-center text-5xl">
    CONTENT TO BE ADDED
  </div>

</body>

</html>