fix bug slide actu
This commit is contained in:
@@ -14,7 +14,7 @@
|
||||
} (Drupal));
|
||||
|
||||
|
||||
// jQuery(document).ready(function($){
|
||||
jQuery(document).ready(function($){
|
||||
|
||||
// $('.open-block').click(function(){
|
||||
// $(this).toggleClass('opened');
|
||||
@@ -35,8 +35,55 @@
|
||||
|
||||
|
||||
|
||||
// });
|
||||
});
|
||||
|
||||
//////// header ////////////
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const headerNavContainer = document.querySelector('.header_nav_container');
|
||||
let lastScrollTop = 0;
|
||||
let threshold = 100; // Change this value as needed
|
||||
let isHidden = false;
|
||||
|
||||
function slideOut() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateX(0)' },
|
||||
{ transform: 'translateX(-100%)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
});
|
||||
isHidden = true;
|
||||
}
|
||||
|
||||
function slideIn() {
|
||||
headerNavContainer.animate([
|
||||
{ transform: 'translateX(-100%)' },
|
||||
{ transform: 'translateX(0)' }
|
||||
], {
|
||||
duration: 300,
|
||||
fill: 'forwards'
|
||||
});
|
||||
isHidden = false;
|
||||
}
|
||||
|
||||
function handleScroll() {
|
||||
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||
|
||||
if (scrollTop > threshold && !isHidden) {
|
||||
slideOut();
|
||||
} else if (scrollTop <= threshold && isHidden) {
|
||||
slideIn();
|
||||
}
|
||||
|
||||
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', function() {
|
||||
handleScroll();
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
// /////////////////
|
||||
//// ancre dans texte au click parragraphe correspondant arrive en dessous du header
|
||||
@@ -118,23 +165,6 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
|
||||
}
|
||||
|
||||
function showSlides(index) {
|
||||
const slides = document.querySelectorAll('.view');
|
||||
const totalSlides = slides.length;
|
||||
const visibleSlides = 3; // Number of slides to show at a time
|
||||
const maxSlide = totalSlides - visibleSlides;
|
||||
|
||||
// Adjust the index to ensure it stays within bounds
|
||||
currentSlide = Math.max(0, Math.min(index, maxSlide));
|
||||
|
||||
// Calculate the offset for the transform
|
||||
const offset = currentSlide * -100 / visibleSlides;
|
||||
document.querySelector('.content-actus').style.transform = `translateX(${offset}%)`;
|
||||
|
||||
// Enable/disable arrows based on the current slide
|
||||
document.getElementById('arrowPrev').disabled = currentSlide === 0;
|
||||
document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
|
||||
}
|
||||
|
||||
function prevSlide() {
|
||||
showSlides(currentSlide - 1);
|
||||
|
||||
@@ -1,46 +1,29 @@
|
||||
header{
|
||||
// display: grid;
|
||||
// grid-template-columns: 2.5fr 1fr;
|
||||
// // grid-gap: 10px;
|
||||
// grid-template-rows: repeat(3, 1fr);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: $header-height;
|
||||
background-color: $white-header;
|
||||
// background-color: $white-header;
|
||||
z-index: 99;
|
||||
width: 38vw;
|
||||
// width: 38vw;
|
||||
max-width: 100vw;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
// border: 1px solid #808080;
|
||||
// @media (max-width:810px) {
|
||||
// // width: 800px;
|
||||
// height: $header-height-pad;
|
||||
// }
|
||||
// @media(max-width: 660px){
|
||||
// height: $header-height-small;
|
||||
// }
|
||||
// @media(max-width: 450px){
|
||||
// display: flex;
|
||||
// height: $header-height-ultrasmall;
|
||||
// }
|
||||
transition: height 0.3s, padding 0.3s; /* Add transition for smooth resizing */
|
||||
|
||||
|
||||
.contextual-region{
|
||||
width: max-content;
|
||||
}
|
||||
|
||||
.header_left_container{
|
||||
// grid-column: 1 ;
|
||||
// grid-row: 1 /span 3;
|
||||
flex: 0 0 60%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border-bottom: 1px solid #808080;
|
||||
padding-left: 2%;
|
||||
padding-right: 2%;
|
||||
transition: transform 0.3s, height 0.3s; /* Add transition for smooth sliding and resizing */
|
||||
background-color: $white-header;
|
||||
@media(max-width: 660px){
|
||||
height: inherit;
|
||||
}
|
||||
|
||||
#block-quartiers-de-demain-logorepu-2{
|
||||
display: none;
|
||||
@media(max-width: 891px){
|
||||
@@ -56,16 +39,15 @@ header{
|
||||
|
||||
}
|
||||
#block-quartiers-de-demain-logoquartiersdedemain{
|
||||
// margin-left: auto;
|
||||
padding-right: 5%;
|
||||
margin: auto;
|
||||
|
||||
}
|
||||
img{
|
||||
width: auto;
|
||||
margin: auto;
|
||||
height: calc($header-height - 5rem);
|
||||
padding: 2rem;
|
||||
transition: height 0.3s; /* Add transition for smooth resizing */
|
||||
@media(max-width: 891px){
|
||||
height: $header-height-pad;
|
||||
}
|
||||
@@ -107,36 +89,23 @@ header{
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.is-active{
|
||||
font-weight: 600;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.header_nav_container{
|
||||
// display: none;
|
||||
// grid-row: 3;
|
||||
// grid-column: 1 /span 2;
|
||||
// position: absolute;
|
||||
flex: 0 0 30%;
|
||||
top: 100%;
|
||||
width: 100%;
|
||||
background: $blue_QDD;
|
||||
border-bottom: 1px solid #808080;
|
||||
border-top: 1px solid #808080;
|
||||
// font-size: $font-big;
|
||||
text-align: center;
|
||||
transform: translateX(0);
|
||||
transition: transform 0.3s ease-in-out;
|
||||
z-index: -1 ;
|
||||
|
||||
#block-quartiers-de-demain-entete{
|
||||
// grid-column: 1 /span 11;
|
||||
|
||||
// order: 2;
|
||||
// margin: auto;
|
||||
h2{
|
||||
display: none;
|
||||
}
|
||||
@@ -166,7 +135,6 @@ header{
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@media(max-width: 660px){
|
||||
|
||||
@@ -174,61 +142,22 @@ header{
|
||||
}
|
||||
}
|
||||
|
||||
// .display-nav-opened{
|
||||
// display: grid;
|
||||
// grid-template-columns: repeat(12, 1fr);
|
||||
// grid-gap: 10px;
|
||||
// }
|
||||
/* Classes for scroll effect */
|
||||
|
||||
|
||||
// .open-block, .open-block.opened{
|
||||
// cursor:pointer;
|
||||
// span{
|
||||
// display: block;
|
||||
// width: 58px;
|
||||
// height: 2px;
|
||||
// position: relative;
|
||||
// background: black;
|
||||
// border-radius: 3px;
|
||||
// z-index: 1;
|
||||
// @media(max-width: 660px){
|
||||
// width: 25px;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// .open-block{
|
||||
// height: 100%;
|
||||
// display: grid;
|
||||
// align-items: center;
|
||||
// margin: auto;
|
||||
// @media(max-width: 450px){
|
||||
// height: $header-height-ultrasmall;
|
||||
// }
|
||||
// span{
|
||||
// margin-bottom: 13px;
|
||||
// transform-origin: 4px 0px;
|
||||
// @media(max-width: 660px){
|
||||
// margin-bottom: 5px;
|
||||
// }
|
||||
// }
|
||||
// &.shrink {
|
||||
// height: var(--header-height-small);
|
||||
// }
|
||||
|
||||
// }
|
||||
// .open-block.opened {
|
||||
// margin: auto;
|
||||
// span {
|
||||
// transform-origin: center;
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
// &>div>span:first-child {
|
||||
// transform: translateY(57%) rotate(45deg);
|
||||
// }
|
||||
// &>div>span:nth-child(2) {
|
||||
// transform: rotate(-45deg);
|
||||
// }
|
||||
// &>div>span:nth-child(3) {
|
||||
// display: none;
|
||||
// }
|
||||
// .header_left_container.shrink {
|
||||
// transform: scale(0.8);
|
||||
// }
|
||||
|
||||
// }
|
||||
.header_nav_container.hidden {
|
||||
transform: translateX(30%);
|
||||
}
|
||||
|
||||
.header_nav_container.visible {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
}
|
||||
@@ -10,7 +10,7 @@
|
||||
$slick-font-path: "./fonts/" !default;
|
||||
$slick-font-family: "slick" !default;
|
||||
$slick-loader-path: "./" !default;
|
||||
$slick-arrow-color: red !default;
|
||||
$slick-arrow-color: black !default;
|
||||
$slick-dot-color: black !default;
|
||||
$slick-dot-color-active: $slick-dot-color !default;
|
||||
$slick-prev-character: "\2190" !default;
|
||||
|
||||
Reference in New Issue
Block a user