There are two pictures, one in the header and the other that should appear when the page is scrolled down. It is necessary that the second picture was not visible in the cap at the beginning. And how else can you change the properties in <a> so that when you click on them there was a different color, through jquery.

 $(document).ready(function() { $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 50) { $(".site-nav").css("background", "white"); $("a").css("color", "black"); $(".main-logo-black").css("src", "../img/logo.svg"); } else { $(".site-nav").css("background", ""); $("a").css("color", "#bababa"); $("a").css("font-family", "Work Sans"); }; }); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <header class="site-header"> <nav class="site-nav"> <div class="container"> <a href="#!"> <img src="assets/img/logo.png" width="100" class="main-logo" alt="logo"> <img src="assets/img/logo.svg" width="100" class="main-logo-black" alt="logo"> </a> <span class="main-nav-trigger">&#9776;</span> <ul class="horizontal-nav "> <li><a href="#">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#projects">Works</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div> </nav>

    2 answers 2

    For a picture, you can do something like this ...

     $(document).ready(function() { var img = $(".main-logo-black"); img.css("display", "none"); // прячем картинку $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll > 50) { img.fadeIn();// показываем картинку } else { img.fadeOut(); //если нужно, то прячем }; }); });

      Well, the link is so

       a:visited{ color:red; }

      If it is nada js then

      $('a:visited').css('color', 'red');

      already visited links

      And with a card, you can check if it is promotono on the bottom then show the picture