0

Есть две картинки одна в шапке и другая которая должна появляться при скроллинге страницы вниз. Нужно чтоб вторую картинке не было видно в шапке вначале. И как еще можно изменить свойства в <a> чтоб там при нажатии на них другой цвет был, через 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 ответа 2

0

Для картинки можно сделать как-то так...

$(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(); //если нужно, то прячем
  };
 });
});
0

Ну по ссылкой есть так

a:visited{
  color:red;
}

Если нада именоо js то как бы так

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

уже посещенные сссылки

а с картникой можно проверить если промототоно по низу то показать картинку

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.