TransWikia.com

скрипт для изменения параметров шапки сайта

Stack Overflow на русском Asked by Aleksus on August 30, 2021

скрипт уже есть, но его надо дополнить.
Задача состоит в том, чтобы при вываливании хэдэра менялся background-color, цвет li – шек и логотип.
т.е. при нулевом состоянии скролла, всё остаётся как есть, а когда скролл > 100, то менялись параметры на указанные выше. Не владею грамматикой JS, но вроде как понимаю правильно)

var header = jQuery('.header'),
        scrollPrev = 0;

jQuery(window).scroll(function() {
    var scrolled = jQuery(window).scrollTop();

    if ( scrolled > 100 && scrolled > scrollPrev ) {
        header.addClass('out');
    } else {
        header.removeClass('out');
    }
    scrollPrev = scrolled;
});
.header {
    display: flex ;
    /* position: fixed; */
    /* display: none; */
    justify-content: space-between;
    align-items: center;
  width: 100%;
    left: 0;
    height: 100px;
  transition: all .5s ease;
    /* background-color: #0f0f0e; */
    background-color: #F5F5F5;
}

.header.out {
  transform: translateY(-100%);
}

.menu ul li a {
    display: block;
    text-transform: uppercase;
    font-size: 14px;
    letter-spacing: 2px;
    font-weight: bold;
    color: #0f0f0e;
    cursor: pointer;
    position:relative;
}
<header class="header">
    <div class='Logo'>
        <div class="img1">
         <a href="/">
             <img src="LOGO" />
        </a>
        </div>

…

javascript

One Answer

UPD

var header = $('.header'),
    isScroll = false;

$(window).on('scroll', function() {
  if($(this).scrollTop() > 100 && isScroll === false) {
    isScroll = true;
    header.addClass('out');
  } else if($(this).scrollTop() <= 100 && isScroll === true) {
    isScroll = false;
    header.removeClass('out');
  }
});
body {
  margin: 0;
  height: 200vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  top: 0;
  left: 0;
  height: 100px;
  transition: all .5s ease;
  position: fixed;
  background-color: #F5F5F5;
}

.header .logo-0 {
  display: block;
}

.header .logo-1 {
  display: none;
}

.header .menu ul li a {
  display: block;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #0f0f0e;
  cursor: pointer;
  position: relative;
}

.header.out {
  background-color: #0f0f0e;
}

.header.out .logo-0 {
  display: none;
}

.header.out .logo-1 {
  display: block;
}

.header.out .menu ul li a {
  color: #F5F5F5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header class="header">
  <div class="Logo">
    <div class="img1">
      <a href="/">
        <img class="logo-0" src="LOGO" alt="logo"/>
        <img class="logo-1" src="LOGO-1" alt="logo-1"/>
      </a>
    </div>
  </div>
  <div class="menu">
    <ul>
      <li><a>item</a></li>
      <li><a>item</a></li>
      <li><a>item</a></li>
    </ul>
  </div>
</header>

в .header нужно подменить background-color: c #F5F5F5 на #0f0f0e в .menu ul li a подменить с #0f0f0e на #F5F5F5 <img src="LOGO" /> подменить, к примеру на <img src="LOGO-1" /> при скролл =0, оставляем всё по дефолту, а при > 100 , меняем на выше указанные

Подмена атрибута у IMG

var header = $('.header'),
    isScroll = false,
    logo0 = 'logo',
    logo1 = 'logo-1';

$(window).on('scroll', function() {
  if($(this).scrollTop() > 100 && isScroll === false) {
    isScroll = true;
    header.addClass('out');
    header.find('.img1 img').attr('src', logo1);
  } else if($(this).scrollTop() <= 100 && isScroll === true) {
    isScroll = false;
    header.removeClass('out');
    header.find('.img1 img').attr('src', logo0);
  }
});
body {
  margin: 0;
  height: 200vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  top: 0;
  left: 0;
  height: 100px;
  transition: all .5s ease;
  position: fixed;
  background-color: #F5F5F5;
}

.header .menu ul li a {
  display: block;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #0f0f0e;
  cursor: pointer;
  position: relative;
}

.header.out {
  background-color: #0f0f0e;
}

.header.out .menu ul li a {
  color: #F5F5F5;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<header class="header">
  <div class="Logo">
    <div class="img1">
      <a href="/">
        <img src="LOGO" alt="logo"/>
      </a>
    </div>
  </div>
  <div class="menu">
    <ul>
      <li><a>item</a></li>
      <li><a>item</a></li>
      <li><a>item</a></li>
    </ul>
  </div>
</header>

в .header нужно подменить background-color: c #F5F5F5 на #0f0f0e в .menu ul li a подменить с #0f0f0e на #F5F5F5 <img src="LOGO" /> подменить, к примеру на <img src="LOGO-1" /> при скролл =0, оставляем всё по дефолту, а при > 100 , меняем на выше указанные

Correct answer by De.Minov on August 30, 2021

Add your own answers!

Ask a Question

Get help from others!

Recent Questions

Recent Answers

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP