Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.08.2014, 13:19
Интересующийся
Отправить личное сообщение для dan4o Посмотреть профиль Найти все сообщения от dan4o
 
Регистрация: 11.07.2014
Сообщений: 18

Как реализовать такое?
Здраствуйте!Нужно реализовать такое,есть примеры?
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");
}
});
Ответить с цитированием
  #2 (permalink)  
Старый 06.08.2014, 13:44
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

dan4o, ну а это 0.4s тебе ни о чем не говорит?
Ответить с цитированием
  #3 (permalink)  
Старый 06.08.2014, 14:07
Интересующийся
Отправить личное сообщение для dan4o Посмотреть профиль Найти все сообщения от dan4o
 
Регистрация: 11.07.2014
Сообщений: 18

извините,спасибо большое))))))))))))(
Ответить с цитированием
  #4 (permalink)  
Старый 06.08.2014, 14:10
Интересующийся
Отправить личное сообщение для dan4o Посмотреть профиль Найти все сообщения от dan4o
 
Регистрация: 11.07.2014
Сообщений: 18

а как сделать кроссбраузерным?тестил на опере и експлорер не работает.а в остальных работает отл
Ответить с цитированием
  #5 (permalink)  
Старый 06.08.2014, 14:27
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 4,662

dan4o, хз что тебе надо.
Ответить с цитированием
  #6 (permalink)  
Старый 06.08.2014, 14:55
Интересующийся
Отправить личное сообщение для dan4o Посмотреть профиль Найти все сообщения от dan4o
 
Регистрация: 11.07.2014
Сообщений: 18

смысле?
Ответить с цитированием
  #7 (permalink)  
Старый 06.08.2014, 16:08
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dan4o,
Генераторы префиксов CSS3 свойств для разных браузеров (вендорные префиксы)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как реализовать эффект lazyload sanek.me Events/DOM/Window 21 15.02.2017 12:31
Как реализовать отправку содержимого из iframe нажатием комбинации клавиш ctrl+enter Naizer Общие вопросы Javascript 4 27.11.2013 17:39
Управление скроллом "а-ля тач" HonesT Элементы интерфейса 2 27.08.2013 14:25
Как это реализовать на JS Bezlyj Общие вопросы Javascript 6 06.03.2012 09:20
Как реализовать вывод такого окна nastya Events/DOM/Window 4 04.02.2010 05:41