Здраствуйте!Нужно реализовать такое,есть примеры?
http://www.fyi.tv/
при скроле хеадер менят цвет,как это сделать?
нашел такую,но цвет меняется быстро
http://www.webdesignerdepot.com/2014...s3-and-jquery/
это скрипт который я скачал,теперь как сделать чтоб при скроле цвет менялся плавно?
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
text-align: left;
// set animation
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
}
header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
}
</style>
</head>
<body>
<!-- our markup -->
<header><h1>Sticky Header</h1></header>
<!-- an image for demonstration purposes -->
<img src="bg.jpeg" width="100%" height="2000" alt="Big Image"/>
<!-- import jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- write script to toggle class on scroll -->
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});