Je peux voir de nombreuses façons de faire le contraire de ce que j'essaie de réaliser, mais en notant ce dont j'ai besoin.

J'ai un en-tête fixe de 100px de haut. Je veux qu'il défile avec le reste de la page lorsqu'un div spécifié atteint l'en-tête ou qu'il est à 100px du haut de l'écran.

J'avais ajouté une classe de défilement à l'en-tête qui rendait littéralement sa position absolue, provoquant le saut de l'en-tête de l'écran. Je l'ai ensuite retransformé en vue, cela ne fonctionnait pas de la même manière sur toutes les tailles d'écran.

Ma prochaine idée est peut-être de le garder fixe mais d'ajouter un transformY négatif à l'en-tête, en fonction de la position de défilement. Cela permettrait d'obtenir le même effet que je recherche, mais je ne sais pas trop comment y parvenir.

Si vous avez besoin de plus d'informations, je suis heureux de vous les fournir.

Éditer:

Voici quelques captures d'écran:

Du haut de la page :

enter image description here

Ensuite, c'est là que je veux que l'en-tête ne soit plus fixe et défile avec le reste de la page :

enter image description here

0
Carl Piper 14 mars 2019 à 11:43

2 réponses

Meilleure réponse

Découvrez ma solution. J'espère que cela t'aides.

const headerEl = document.querySelector('header')
const targetEl = document.querySelector('#target')

const targetTopPos = targetEl.getBoundingClientRect().top

let isHeaderFixed = true

document.onscroll = () => {
  const targetTopOffset = targetEl.getBoundingClientRect().top
  
  if (isHeaderFixed && targetTopOffset < 100) {
    headerEl.style.position = 'absolute'
    headerEl.style.top = `${targetTopPos - 100}px`
    isHeaderFixed = !isHeaderFixed
  }
  
  if (!isHeaderFixed && targetTopOffset >= 100) {
    headerEl.style.position = 'fixed'
    headerEl.style.top = '0px'
    isHeaderFixed = !isHeaderFixed
  }
}
body {
  padding: 0;
  margin: 0;
  position: relative;
}

header {
  position: fixed;
  height: 100px;
  width: 100%;
  background: lightblue;
}

.content {
  line-height: 100px;
}

.target {
  width: 100%;
  background: red;
}
<header>
  Custom header
</header>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
<div id="target" class="target">target</div>
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
1
lankovova 14 mars 2019 à 09:32

Je devrais par défaut faire .header {position: absolute} et ajouter cette classe à css (pas encore à l'élément):

.header.active {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

Ensuite, comprenez quand nous devons porter cet événement sur l'en-tête. JS vous aidera :

var targetElement = document.querySelector( YOUR TARGET ELEMENT ),
    header = document.querySelector('.header');

window.onscroll = function(event){
  if ( targetElement.offsetTop > window.pageYOffset ) {
    header.classList.add('active');
  } else {
    header.classList.remove('active');
  }
}

L'élément cible est l'élément qui, lorsque vous souhaitez l'atteindre, l'en-tête sera fixe. Si tu as besoin

0
Maksims Kitajevs 14 mars 2019 à 09:05