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');

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

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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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