Как изменить размер липкого заголовка при прокрутке с помощью CSS-параллакса? - PullRequest
Новая
       54

Как изменить размер липкого заголовка при прокрутке с помощью CSS-параллакса?

0 голосов
/ 28 марта 2019

Когда пользователь прокручивает 600 пикселей вниз от верхней части документа, я хочу изменить размер логотипа липкого заголовка, но, поскольку я добавил контейнер параллакса, кажется, что эта часть javascript больше не работает. Мне удалось сделать плавную прокрутку, чтобы все ссылки работали.

Я пытался изменить свой скрипт липкого заголовка для таргетинга на контейнер параллакса, как я это делал с плавной прокруткой, но я не эксперт в JS. 

<header>
<nav class="navbar navbar-expand-lg fixed-top navbar-light">
<div class="container">
<h1><a class="navbar-brand" href="#"><img id="imgnav" src="img/143.png" alt="Cupcakes shop"></a></h1>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
<div class="justify-content-end collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a></li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a></li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a></li>
<li class="nav-item">
<a class="nav-link" href="#section4">Section 4</a></li>
</ul>
</div>
</nav>
</div>
</header>

Когда пользователь прокручивает 600 пикселей вниз от верхней части документа, изменяет размер логотипа заголовка 

<script>
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 
600) {
document.getElementById("imgnav").style.width = "30%";
} else {
document.getElementById("imgnav").style.width = "50%";
}
}
</script>

Модифицировано Каролиной Вейльо https://www.w3schools.com/howto/howto_js_shrink_header_scroll.asp

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>

Добавить плавную прокрутку ко всем ссылкам 

<script>
$(document).ready(function () {
$("a").on('click', function (event) {

Убедитесь, что this.hash имеет значение, прежде чем переопределять поведение по умолчанию 

if (this.hash !== "") {

Предотвращение поведения щелчка якоря по умолчанию 

event.preventDefault();

Хэш магазина 

var hash = this.hash;

Использование метода animate () в jQuery для добавления плавной прокрутки страницы Необязательный номер (800) указывает количество миллисекунд, необходимое для прокрутки до указанной области 

$('#parallax-container').animate({scrollTop: $(hash).offset().top}, 800, 
function () {

Добавить хэш (#) к URL-адресу после завершения прокрутки (поведение по умолчанию) 

window.location.hash = hash;});
}
});
});
</script>

Ref: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll Ссылка на исправление проблемы скрипта с параллаксом: https://keithclark.co.uk/articles/practical-css-parallax/

На самом деле мой логотип липкого заголовка не изменяется при прокрутке, и я ожидаю, что он уменьшится.

...