0

Собственно в чем вопрос! Интересует реализация смены цвета бэкграунда фиксированного хедера при скролле! Находясь в определенной секции лендинга(home/about/work/ и т.д.). Как это можно реализовать?

2
  • вешаете событие онскролл, и в точке, в которой нужно меняете собственно цвет
    – Oleksandr
    7 апр 2017 в 10:43
  • Так, а теперь подробнее! Нельзя ли показать пример? 7 апр 2017 в 10:47

2 ответа 2

0

Упрощенный способ, если у вас не будет дополнительных классов у шапки

$(window).scroll(function(){
    var currentclass
    $('section').each(function(){
       if($(this).offset().top<$(window).scrollTop()){
          currentclass =$(this).attr('id')
       }
       
    })
    $('header').attr('class',currentclass)
})
header{
    position:fixed;
    height:100px;
    width:100%;
    background:#ccc;
}
section{
    height:700px;
}
.home{
    background:red;
}
.about{
    background:blue;
}
.contacts{
    background:green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header></header>
<section id=home></section>
<section id=about></section>
<section id=contacts></section>

1
  • Отлично! То что нужно, коротко и ясно! Всем спасибо за помощь! 7 апр 2017 в 10:59
0

https://jsfiddle.net/rrtmmyj9/ Пример смены бг по позиции экрана и нужно вам блока

$(window).scroll(function () {
 $('.two').offset().top;
 if ($('.two').offset().top >= pageYOffset) {
  $('.two').css('background',"blue");
 }
})

Ваш ответ

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

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