1
votes

Comment obtenir l'effet Afficher / Masquer en faisant défiler (haut / bas)

Mon site Web a une barre de menus, et je souhaite qu'elle se masque lorsque l'utilisateur fait défiler vers le bas et qu'elle s'affiche lorsque l'utilisateur fait défiler vers le haut.

J'ai essayé d'utiliser la fonction scrollTop , et j'ai trouvé le code pour ajouter la fonction scrollBottom . Malheureusement, cela ne fonctionne pas.

$(document).ready(function() {

    $.fn.scrollBottom = function(scroll) {
        if (typeof scroll === 'number') {
            window.scrollTo(0, $(document).height() - $(window).height() - scroll);
            return $(document).height() - $(window).height() - scroll;
        } else {
            return $(document).height() - $(window).height() - $(window).scrollTop();
        }
    }
    $(document).scrollTop(function() {
        $('header').fadeIn(200);
    });
    $(document).scrollBottom(function() {
        $('header').fadeOut(200);
    });

});

J'aimerais obtenir un effet de barre comme celui-ci:

jquery

0 commentaires

4 Réponses :

1
votes

.scrollTop n'est pas destiné à être utilisé de cette manière. Il s'agit plutôt d'une propriété d'élément qui renvoie la distance entre l'élément et le haut.

MDN: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop

Je pense que ce que vous voulez à la place est pour ajouter un écouteur d'événement (dans jQuery .on () ) pour faire défiler puis déclencher conditionnellement les fonctions que vous voulez dans le rappel de l'écouteur. En supposant que votre fonction de détection de défilement renvoie correctement vrai / faux:

function scrolledFunc() {
  // returns true if page is scrolled
}

$(document).on('scroll', function() {
  if (scrolledFunc) {
    $('header').fadeIn(200);
  }
});

0 commentaires

0
votes

<div class="scroll-to-top" id="return-to-top">
      <a href="javascript:"><i class="fas fa-angle-up"></i></a>
  </div>

document.getElementById("return-to-top").style.display = "none";

$(window).scroll(function(){
  if($(this).scrollTop() >= 10)
    {
      document.getElementById("return-to-top").style.display = "";
    }
    else 
    {
      document.getElementById("return-to-top").style.display = "none";
    }
});

Voici un autre exemple, j'espère que cela vous aidera.

0 commentaires

0
votes

Voici un autre exemple, montrant comment détecter si la direction de défilement de l'utilisateur va vers le bas ou vers le haut, et affiche / masque une barre de menus selon le cas.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

<div id="mnu">Menu Bar</div>
<div id="content" class="flex-parent">
  <div class="flex-child">Content goes here</div>
  <div class="flex-child">Content goes here</div>
  <div class="flex-child">Content goes here</div>
  <div class="flex-child">Content goes here</div>
  <div class="flex-child">Content goes here</div>
  <div class="flex-child">Content goes here</div>
  <div class="flex-child">Content goes here</div>
</div>
<div id="msg"></div>

#mnu{position:fixed;top:0;left:0;width:100vw;height:40px;background:black;color:white;}
#content{width:100vw;min-height:200vh;}
  .flex-parent{display:flex;justify-content:center;align-items:center;flex-direction:column;}
  .flex-child{flex:1;}
  .flex-child:nth-child(1){margin-top:80px;}
  
#msg{position:fixed;top:0;right:0;padding:10px;text-align:center;background:wheat;}

var lastpos=0, lastScrollDir='up';
$(window).scroll(function(){
  let curpos = $(window).scrollTop();
  let scrollDir = (curpos > lastpos) ? 'down' : 'up';
  if (scrollDir !== lastScrollDir && scrollDir == 'down'){
     lastScrollDir = scrollDir;
     $('#mnu').animate({
        height: '0px'
     },700);
  }else if (scrollDir !== lastScrollDir && scrollDir == 'up') {
     lastScrollDir = scrollDir;
     $('#mnu').animate({
        height: '40px'
     },700);
  }
  
  $('#msg').html(scrollDir + ' / ' + curpos);
  lastpos = curpos;
});

0 commentaires

1
votes

J'ai déjà trouvé une solution.

$(document).ready(function(){ 
    var zero = 0;  
    $(document).on('scroll', function(){
        $('header').toggleClass('hide', $(window).scrollTop() > zero);
        zero = $(window).scrollTop();
    });
});

0 commentaires