Changer la marge en haut de la div en fonction du défilement de la fenêtre

J’ai une barre en haut de ma page qui est la position fixe. Lorsque l’utilisateur fait défiler jusqu’à un certain point, je veux que la barre commence à monter comme si elle était positionnée de manière relative ou absolue.

Pour le moment, le css de la barre passe de fixe à position absolue, mais bien sûr, cela place la division directement en haut de la page.

Je regarde cela depuis des lustres et je ne sais pas trop comment relever la barre, pixel après pixel, pour chaque pixel défilé devant _sortingggerOffset.

Quelqu’un peut-il m’éclairer?

function banner(){ var _barOffset = $('#top-bar').outerHeight(), _navOffset = $('#navigation').offset().top, _sortingggerOffset = _navOffset-_barOffset; $(window).scroll(function() { var _scroll = $(window).scrollTop(); if (_scroll >= _sortingggerOffset) { $('#top-bar').css({'position':'absolute'}); } }); } banner(); 

J’ai fait du violon.

Vérifiez ce violon

Démo de travail

 $(document).ready(function() { var postionToTriggerMove = 500; var positioninitial = $(window).scrollTop(); var positioninitialLine = $(".line").offset().top; $(window).scroll(function() { var _scroll = $(window).scrollTop(); if(_scroll > positioninitial) { if(_scroll >= (postionToTriggerMove - 5) && _scroll <= (postionToTriggerMove + 5) ) { var topBarPostion = $(".line").offset().top; $('.line').css({'position':'absolute',"top":topBarPostion}); } } else { if(_scroll >= (postionToTriggerMove - 5) && _scroll <= (postionToTriggerMove + 5) ) { var topBarPostion = $(".line").offset().top; $('.line').css({'position':'fixed',"top":positioninitialLine}); } } positioninitial = _scroll; }); }); 

Vous pouvez essayer quelque chose comme ce qui suit:

 function banner(){ var _barOffset = $('#top-bar').outerHeight(), _navOffset = $('#navigation').offset().top, _sortingggerOffset = _navOffset-_barOffset; $(window).scroll(function() { var _scroll = $(window).scrollTop(); if (_scroll >= _sortingggerOffset) { $('#top-bar').css({'position':'absolute','top':_sortingggerOffset - (_scroll-_sortingggerOffset)}); } }); } banner(); 

Ce code est hautement non testé, mais nous définissons initialement l’élément en position absolue et définissons le haut de cet élément comme étant le _sortingggerOffset. Nous prenons ensuite la différence entre le défilement actuel et le sortingggerOffset et le soustrayons de la position supérieure. pour faire monter la barre plus vous faites défiler vers le bas.

Je ne sais pas si c’est ce que vous aviez à l’esprit, mais je chercherais une solution de ce type. Vous voudrez peut-être append certaines conditions pour que le sumt ne descende jamais en dessous de 0 ou que la navigation disparaisse de l’écran.

Merci, j’ai joué avec les deux exemples et ils ont très bien fonctionné.

En fin de compte, j’ai peaufiné mon code et au lieu de positionner la barre au dessus de 0px, je l’ai faite positionner la tête avec les pixels égaux à la distance de décalage. Je ne sais pas pourquoi je n’y avais pas pensé avant.

Sur une autre note, j’utilise le code de Shinov pour un autre projet, car je l’aime bien 🙂

Merci

 function banner(){ var _barOffset = $('#top-bar').outerHeight(), _navOffset = $('#navigation').offset().top, _sortingggerOffset = _navOffset-_barOffset; $(window).scroll(function() { var _scroll = $(window).scrollTop(); if (_scroll >= _sortingggerOffset) { $('#top-bar').css({'position':'absolute', 'top':_sortingggerOffset+'px'}); }else if (_scroll <= _triggerOffset){ $('#top-bar').css({'position':'fixed', 'top':'0px'}); } }); }