1

Есть следующий код. Нужно, чтобы при скролле у меня шапка плавно меняла свой вид на новый. Проще говоря, в обычном состоянии шапка должна быть одного вида, а при скролле та должна скрываться и поменяться на новую, которая до этого была скрыта. Помогите пожалуйста реализовать идею... горизонтальную черту можно убрать, таким образом просто разделила 2 шапки друг от друга

.normalCondition {
background: lightblue;
}
.header__blockFirst {
display: flex;
width: 100%;
height: auto;
justify-content: space-between;
}
.header__blockFirst div:hover {
background: blue;
color: white;
}
.one {
width: 60px;
height: 20px;
background: lightgreen;
}
.two{
height: 1px;
    width: 100%;
    border: 0;
    outline: none;
    background-color: white;
    margin-top: 5px;
}
.header__blockThird {
display: flex;
justify-content: space-between;
}
.three {
width: 90px;
background: green;
}
.three:hover {
background: lightgreen;
}

.ifScroll {
display: flex;
justify-content: space-between;
background: pink;
width: 100%;
height: auto;
}
<!-- показывать в обычном состоянии --!>

<header class="normalCondition">
  <div class="header__blockFirst">
    <div class="one">home</div>
    <div class="one">about</div>
    <div class="one">contacts</div>
    <div class="one">address</div>
    <div class="one">consul-n</div>
  </div>
  
    <div class="two"></div>
    <div class="two"></div>

  <div class="header__blockThird">
    <button>---</button>
    <div class="three">1</div>
    <div class="three">2</div>
    <div class="three">3</div>
    <div class="three">4</div>
    <div class="three">5</div>
    <div class="three">6</div>
  </div>
</header>
  <hr>
  
  <!-- показывать при скролле --!>
<header class="ifScroll">
  <button>---</button>
  <div class="blockFirst">
      <div class="header__blockFirst">
        <div class="one">home</div>
        <div class="one">about</div>
        <div class="one">contacts</div>
        <div class="one">address</div>
        <div class="one">consul-n</div>
      </div>
     <div class="header__blockThird">
        <div class="three">1</div>
        <div class="three">2</div>
        <div class="three">3</div>
        <div class="three">4</div>
        <div class="three">5</div>
        <div class="three">6</div>
     </div>
  </div>
  <div class=""></div>
  </div>
</header>
<div class="content">
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.

Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

2
  • А плавность и анимация в чем заключается в вашем вопросе: в том, что кнопка визуально вместо одной строки при прокрутке будет занимать две строки?
    – user256824
    7 июн 2019 в 7:53
  • это я образно сверстала шапку..на самом деле шапка в принципе свой вид будет менять полностью. Думаю сделать через v-if / else, но не знаю как реализовать функцию, чтобы срабатывала при скролле
    – nbelle
    7 июн 2019 в 15:20

1 ответ 1

2

Если вы планируете менять шапку сайту через директивы v-if/v-else, то можно обойтись меньшими потерями. После инициализации экземпляра приложения Vue, извне менять значение, которое вы определили как ifScroll в вашем вопросе.

const app = new Vue({
  el: "#app",
  data: {
    ifScroll: false
  }
})

window.addEventListener('scroll', function(event) {
  app.ifScroll = window.scrollY > 50
})

Главный момент при определении анимации в вашем случае, это прописывание уникальных key для корневых элементов шапок, например: first и second.

<header v-if="!ifScroll" key="first">
  <!--  -->
</header>
<header v-else key="second">
  <!--  -->
</header>

Дальше дело только за стилями.

// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false
Vue.config.devtools = false

const app = new Vue({
  el: "#app",
  data: {
    ifScroll: false
  }
})

window.addEventListener('scroll', function(event) {
  app.ifScroll = window.scrollY > 50
})
.flip-enter {}

.flip-enter-active {
  animation: flipInX .4s;
}

.flip-leave {}

.flip-leave-active {
  animation: flipOutX .4s;
}

@keyframes flipInX {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0);
  }
}

@keyframes flipOutX {
  from {
    transform: rotateX(0);
  }
  to {
    transform: rotateX(90deg);
  }
}


/**
  Дальше код, не имеющий
  прямого отношения к вопросу.
  */

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 80px 20px;
  background: #fafafa;
}

p {
  line-height: 288px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fafafa;
}

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background-color: #008cba
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-direction: row;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  background-color: transparent;
}
<div id="app">
  <header>
    <transition name="flip" mode="out-in">
      <nav v-if="!ifScroll" class="navbar" key="first">
        <ul class="navbar-nav">
          <li class="nav-item"><a href="#" class="nav-link">Категории</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Записи</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Заметки</a></li>
        </ul>
      </nav>
      <nav v-else class="navbar" key="second">
        <ul class="navbar-nav">
          <li class="nav-item"><a href="#" class="nav-link">Файлы</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Коментарии</a></li>
          <li class="nav-item"><a href="#" class="nav-link">Пользователи</a></li>
        </ul>
      </nav>
    </transition>
  </header>

  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


При использовании вложенного компонента нужно переписать уже на локальные методы, либо напрямую использовать хуки:

mounted() {
  window.addEventListener('scroll', (event) => this.ifScroll = window.scrollY > 50)
},

Шапка сайта - это элемент который чаще всего постоянно присутствует на странице, поэтому использование хука destroyed с удалением слушателя - избыточно.


Ниже еще один вариант с использованием пользовательской директивы v-scroll и вложенным компонентом. Тоже избыточный, поэтому не был опубликован в первой редакции ответа.

// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false
Vue.config.devtools = false

// Компонент шапки сайта.
const Header = {
  data() {
    return {
      ifScroll: false
    }
  },
  directives: {
    // Определяем локальную директиву `v-scroll`.
    scroll: {
      // Хук, срабатывающий при вставке в родительский DOM.
      inserted(element, binding) {
        // По такому же принципу
        // как в первом варианте ответа
        // добавляем слушателя на событие.
        window.addEventListener('scroll', function(event) {
          // Получаем значение,
          // возвращаемое из локального метода `handleScroll`.
          let result = binding.value(event, element)
          // При прокрутке смотрите в консоль.
          console.log(result)
        })
      }
    }
  },
  methods: {
    // Обработчик локальной директивы `v-scroll`.
    handleScroll(event, element) {
      this.ifScroll = window.scrollY > 50

      return this.ifScroll
    }
  },
  template: `<div>
    <header v-scroll="handleScroll">
      <transition name="flip" mode="out-in">
        <nav v-if="!ifScroll" class="navbar" key="first">
          <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Категории</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Записи</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Заметки</a></li>
          </ul>
        </nav>
        <nav v-else class="navbar" key="second">
          <ul class="navbar-nav">
            <li class="nav-item"><a href="#" class="nav-link">Файлы</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Коментарии</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Пользователи</a></li>
          </ul>
        </nav>
      </transition>
    </header>
  </div>`
}

const app = new Vue({
  el: "#app",
  components: {
    'header-component': Header
  },
  data: {}
})
.flip-enter {}

.flip-enter-active {
  animation: flipInX .4s;
}

.flip-leave {}

.flip-leave-active {
  animation: flipOutX .4s;
}

@keyframes flipInX {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0);
  }
}

@keyframes flipOutX {
  from {
    transform: rotateX(0);
  }
  to {
    transform: rotateX(90deg);
  }
}


/**
Дальше код, не имеющий
прямого отношения к вопросу.
*/

*,
*::after,
*::before {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding-top: 80px;
  background: #fafafa;
}

p {
  line-height: 88px;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fafafa;
}

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background-color: #008cba
}

.navbar-nav {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-direction: row;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  background-color: transparent;
}
<div id="app">
  <header-component></header-component>

  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
  <p>Lorem ipsum dolor sit amet, illum definitiones no quo.</p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10"></script>

2
  • мастер)........ 7 июн 2019 в 19:25
  • спасибо за ответ. Хотела уточнить следующее: а если это делать так - шапки лежат в отдельном компоненте, также есть v-if / v-else. В app через props я передаю свою переменную с флагом. и внутри app.vue я уже делаю необх.действия через addevent.... в хуке created, и removeevent.... в хуке destroyed. Подписываюсь и отписываюсь я к одному и тому же методу...Но вообще планировалось так, что в этом методе я просто меняю флаг с false на true. Соответственно, у меня сейчас прокрутка работает в одну сторону...ТО есть, шапка меняется при скролле вниз, а при обратном - ничего не происходит
    – nbelle
    11 июн 2019 в 6:22

Ваш ответ

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

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