How to make the Youtube Music fixed menu effect

Question

How to make the Youtube Music fixed menu effect

Navigation

#1 by (3 votes)

2

I would like to bring this effect of the Youtube Music app menu to my site. Basically it rolls along with the page when descending and appears again when ascending, fixedly.

Mycurrentattemptisnotsimilar,whengoingdownthepagethemenugoesupandwhenitgoesupitgoesdown,butitisnotaccordingtothescrollingmovementdone,itgoesupinstantly.Hereisanexampleoftheresultofthisattempt:

var position = $(window).scrollTop();

// should start at 0

$(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if(scroll > position) {
        console.log('scrollDown');
        if(position > 45) {
            $('.a').addClass('mostra');
        }
    } else {
         console.log('scrollUp');
         $('.a').removeClass('mostra');
    }
    position = scroll;
});

body {
    height: 2000px;  
    background: orange;
}
.a {
    height: 50px;
    width: 50px;
    background-color: green;
    position: fixed;
    top: 0;
    transition: 0.5s;
}
.mostra {
  top: -50px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script><divclass="a"></div>

Tips ??

html jquery css menu youtube

asked by anonymous 12.12.2018 / 00:40

1 answer

Effect used in Tecmundo? Change attribute of a component in another non-angular component

score 3 · Accepted Answer

This image shows an app, and this is an iOS feature that can be easily obtained in the ObjectiveC language.

I searched for something similar in Javascript but did not find it. So I met the challenge and developed my own version. It's not perfect because I'm not a Javascript expert, let alone a designer, but to make the scrolling smoother you can:

Use CSS ( transition: all easy-out 0.1s; , as below)

Use the library nicescrool for jQuery (in the JSFiddle link you can see the result of this)

That said, follows the JSFiddle link: Hide topbar with scroll

/* Quando o usuario rola para baixo, esconde a topbar. Quando rola para cima, a topbar rola junto */
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  var topbarPosition = document.getElementById("topbar").style.top;
  //é preciso multiplicar por -1 pq a regex não converte o sinal
  var posNum = parseInt(topbarPosition.replace(/[^0-9]/g, '')) * (-1);
  if (isNaN(posNum)) posNum = 0; //corrige o valor inicial se nao for um numero
  if (prevScrollpos > currentScrollPos) {
    //scroll up
    if (posNum <= 0) {
      posNum = posNum - parseInt(currentScrollPos - prevScrollpos);
      if (posNum > 0) posNum = 0;
    } else posNum = 0;
    document.getElementById("topbar").style.top = posNum + "px";
  } else {
    //scroll down
    if (posNum >= -50) {
      posNum = posNum - parseInt(currentScrollPos - prevScrollpos);
      if (posNum < -50) posNum = -50;
    } else posNum = -50;
    document.getElementById("topbar").style.top = posNum + "px";
  }
  prevScrollpos = currentScrollPos;
}

#topbar {
  background-color: #333;
  top: 0px;
  width: 100%;
  position: fixed;
  z-index: 999;
  width: 100%;
  box-shadow: 0 0 3px #000;
  transition: all ease-out 0.1s;
  -webkit-transition: all ease-out 0.1s;
  -moz-transition: all ease-out 0.1s;
}

#topbar a {
  float: left;
  display: block;
  color: white;
  text-align: center;
  padding: 15px;
  text-decoration: none;
}

#topbar a:hover {
  background-color: #ddd;
  color: black;
}

<div id="topbar">
  <a href="#home">Home</a>
  <a href="#news">Notícias</a>
  <a href="#contact">Contato</a>
</div>
<div style="padding:15px 15px 2500px;font-size:30px;margin-top:30px;">
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>