Scroll - Else ne reagit pas
Ekim Kael
Bonjour,
Voila je rencontre un petit problème avec mon code.
Mon HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no" />
<title>CAN 2017 App</title>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- Icons -->
<link rel="stylesheet" type="text/css" href="ionicons/css/ionicons.min.css">
</head>
<body>
<main>
<nav>
<a href="#"><i class="ion-ios-home"></i><small>Home</small></a>
<a href="#"><i class="ion-ios-person"></i><small>User</small></a>
<a href="#"><i class="ion-ios-search"></i><small>Search</small></a>
<a href="#" class="active"><i class="ion-ios-cog"></i><small>Settings</small></a>
</nav>
<!-- Header -->
<header class="cover">
<div class="navigation">
<a href="#"><i class="ion-ios-arrow-thin-left"></i></a>
<h3>Titre du POST</h3>
<a href="#"><i class="ion-ios-more"></i></a>
</div>
<div class="score-board"></div>
</header>
<section class="content">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit distinctio nihil placeat quam ipsum dolores ducimus, in ea nemo! Laboriosam atque labore doloribus ea voluptas alias quibusdam nulla dolorem eum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit distinctio nihil placeat quam ipsum dolores ducimus, in ea nemo! Laboriosam atque labore doloribus ea voluptas alias quibusdam nulla dolorem eum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit distinctio nihil placeat quam ipsum dolores ducimus, in ea nemo! Laboriosam atque labore doloribus ea voluptas alias quibusdam nulla dolorem eum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit distinctio nihil placeat quam ipsum dolores ducimus, in ea nemo! Laboriosam atque labore doloribus ea voluptas alias quibusdam nulla dolorem eum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit distinctio nihil placeat quam ipsum dolores ducimus, in ea nemo! Laboriosam atque labore doloribus ea voluptas alias quibusdam nulla dolorem eum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit distinctio nihil placeat quam ipsum dolores ducimus, in ea nemo! Laboriosam atque labore doloribus ea voluptas alias quibusdam nulla dolorem eum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit distinctio nihil placeat quam ipsum dolores ducimus, in ea nemo! Laboriosam atque labore doloribus ea voluptas alias quibusdam nulla dolorem eum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit distinctio nihil placeat quam ipsum dolores ducimus, in ea nemo! Laboriosam atque labore doloribus ea voluptas alias quibusdam nulla dolorem eum.
</section>
</main>
<!-- Scripts -->
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</body>
</html>
mon CSS
/*
- width = 320px
- height = 568px
*/
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
position: relative;
background-color: #eceef2;
font-family: Open Sans;
}
a {
text-decoration: none;
}
main {
margin: 0 auto;
}
nav {
width: 100%;
height: 50px;
background-color: #fff;
position: fixed;
bottom: 0;
box-shadow: 0 -4px 10px rgba(215,215,215,0.7);
}
nav a {
display: inline-block;
width: 24.2%;
height: 100%;
text-align: center;
font-size: 32px;
color: #404040;
padding: 5px 0;
margin: 0 auto;
line-height: 5px;
}
nav a i {
display: block;
}
nav a small {
font-size: 12px;
font-weight: bolder;
display: block;
}
nav .active {
background-color: #f5f5f5;
color: #dc143c;
}
.cover {
width: 100%;
height: 200px;
background-image: url("../images/2.jpg");
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
box-shadow: 0 4px 20px rgba(215,215,215,0.7);
}
.cover .navigation {
width: 100%;
height: 50px;
display: flex;
flex-direction: row;
align-items: center;
align-content: center;
justify-content: space-between;
padding: 0 20px;
}
.cover .navigation h3 {
color: #fff;
clear: both;
opacity: 1;
}
.cover .navigation i {
font-size: 32px;
color: #fff;
}
.content {
padding: 5px 20px;
min-height: 300px;
}
.fixed {
position: fixed;
top: 0;
}
.sticky {
background-color: rgba(64,64,64,0.5);
animation: slide 0.5s linear;
}
@-moz-keyframes slide {
0% {
height: 0;
}
100% {
height: 50px;
}
}
@-webkit-keyframes slide {
0% {
height: 0;
}
100% {
height: 50px;
}
}
@-o-keyframes slide {
0% {
height: 0;
}
100% {
height: 50px;
}
}
@keyframes slide {
0% {
height: 0;
}
100% {
height: 50px;
}
}mon JS
var cover = document.querySelector('.cover')
var scoreBoard = document.querySelector('.score-board')
var navigation = document.querySelector('.navigation')
var h = cover.offsetHeight - 20
var y = window.scrollY
var onScroll = function(){
if(y <= h){
scoreBoard.style.display = "none"
cover.style.height = "50px"
cover.classList.add('fixed')
navigation.classList.add('sticky')
}else{
scoreBoard.style.display = "block"
navigation.classList.remove('sticky')
cover.classList.remove('fixed')
}
}
window.addEventListener('scroll',onScroll)le scroll vers le bas fonctionne mais lorsque je remonte le ELSE ne fonctionne pas
Merci d'avance
2 réponses
Salut,
Tu ne met pas à jour la valeur des variables h et y dans le callback de l'event, donc c'est normal.
var h = cover.offsetHeight - 20,
y = window.scrollY
var onScroll = function() {
h = cover.offsetHeight - 20
y = window.scrollY
if (y <= h) {
scoreBoard.style.display = "none"
cover.style.height = "50px"
cover.classList.add('fixed')
navigation.classList.add('sticky')
} else {
scoreBoard.style.display = "block"
navigation.classList.remove('sticky')
cover.classList.remove('fixed')
}
}