Я нашел этот сайт сегодня http://www.mcdonalds.de/. Кто-нибудь знает, как сделать такой липкий заголовок? Только логотип прокручивается вниз, навигация навигации и логотипа показывает навигацию. , если какой-либо способ может помочь мне с кодированием или любым ресурсом, который поможет мне создать то же самое. Ваш ответ мне очень помог.Sticky Header Logo Hover
Это просто смешная реализация, но я думаю, вы можете получить эту идею.
$(window).scroll(function() {
var $container = $(".container");
var container_offset = $container.offset().top - $(window).scrollTop();
console.log(container_offset);
if(container_offset){
$container.addClass('fixed');
}else{
$container.removeClass('fixed');
}
});@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
background-color: #bdc3c7;
padding:0;
margin:0;
}
.header {
background-color: #3498db;
float: left;
width: 100%;
height: 70px;
transition: width .3s;
}
.container.fixed .header {
width: 100px;
max-width: 900px;
position: fixed;
top: 20px;
}
.container.fixed .header ul {
display: none;
}
.container.fixed .main {
margin-top: 70px;
}
h1 {
float: left;
}
ul {
float: left;
}
ul li {
display: inline-block;
}
.container {
margin: 0 auto;
width: 100%;
padding: 20px;
background-color: #34495e;
float: left;
}
.main {
min-height: 1000px;
color: #fff;
float: left;
line-height: 1.4em;
}
p {
margin-bottom: 20px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<header class="header">
<h1>logo</h1>
<ul>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
<li><a href="#">foo</a></li>
</ul>
</header>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique fugiat eveniet reprehenderit, nesciunt asperiores enim quaerat, totam laboriosam ratione sapiente corporis, ullam cum et vitae hic dolor in blanditiis quas.</p>
</div>
</div>Wowww perfekt только один думает, что с помощью мыши над эффектом и его супер –
Конечно, вы можете создать его самостоятельно. Но я думаю, вам нужно быстрое и простое решение.
Именно поэтому я рекомендовал бы использовать это: http://janpaepke.github.io/ScrollMagic/
Если вы хотите создать его самостоятельно, я бы рекомендовал, по крайней мере использовать JQuery. Читайте об этих темах:
Что вы га чтобы сделать это: Создайте два класса Один из них выглядит как «большая панель» и один, как «маленькая панель» Запуск события прокрутки выполняет изменение класса (переключает). Вы должны анимировать его через переход или jQuery .animate. Вы можете получить метод «.offset», находится ли элемент в верхней части (offset = 0) или нет.
Я создал для вас пример. Вы должны заменить событие нажатия кнопки событием прокрутки. Вы также должны проверить, какое значение имеет смещение. Если он в верхней части, используйте класс «большой», иначе «маленький».
Вы должны добавить «положение: исправлено» в CSS заголовка (#header). Затем div «склеивается» в верхней части окна. Вы достигнете этого эффекта, когда остальная часть содержимого прокручивается за панель заголовка.
function scrollybolly(){
var header = document.getElementById("header");
if(header.className == "big"){
header.className = "small";
}else{
header.className = "big";
}
}.big{
width: 200px;
height: 40px;
border: solid black 1px;
}
.small{
width: 50px;
height: 40px;
border: solid black 1px;
}
#header{
-webkit-transition: width 2s ease;
-moz-transition: width 2s ease;
-ms-transition: width 2s ease;
-o-transition: width 2s ease;
transition: width 2s ease;
}<div id="header" class="big"></div>
<Button onClick="scrollybolly()">Click here to simulate a scroll event</Button>Что я использовал:
Даже если вы предоставляете много материала для чтения, вы не * решаете * вопрос. Вы только даете некоторые источники, чтобы заглянуть. Следовательно, это должен быть комментарий, а не ответ. –
Мы действительно не можем написать ему эту кучу кода (imho). Я беру stackoverflow как платформу обучения, а не как портал «pls do my work». – OddDev
Исправить. Вот почему я проголосовал за закрытие. Тем не менее, ваш пост должен был быть не более чем комментарием. После вашего редактирования это более или менее хорошо. –
Вы просто даете 'положение: fixed' к заголовку, положить переход все XMS линейный или любой другой, и использовать [scrollTop] (Http: //api.jquery.com/scrolltop /), чтобы обнаружить, например, прокрутку 80px и скрыть заголовок – mrpinkman
Обнаружить scrollTop, добавить «минимизированный» класс в заголовок при прокрутке, изменить свойство отображения в меню и ширину навигатора. Для анимированного эффекта используйте свойство 'переход'. –