slide div e fixo div, igual ao imaster

[marcelocardoso 6]

Pessoal!

Quem souber e quiser contribuir agradeço.
Olhando o site do iMasters, basimente nesta tela: 
https://imasters.com.br/desenvolvimento/pwa-progressive-web-apps-e-o-minimo-que-voce-precisa-saber-respeito/?trace=1519021197&source=single

Notei duas coisas interessantes:
1) ao passar o mouse no lado esquerdo tem uma div que vem para a esquerda;
2) tem uma div no contexto da página também, que quando chega em determinada região, fica fixa e depois em determinada região some novamente;

Usa-se JQ e CSS, mas qual seria a melhor maneira de criar, jeito correto?
Quem quiser contribuir com exemplos, agradeço.
Para aprendizado.

[Omar~ 87]

Nada mais é que o básico de manipulação de elementos

 

<style>
    /* Questão 1 */
    #deslizante {
        position: absolute;
        top: 0;
        right: 0;
        margin-right: -300px;
        width: 350px;
        height: 100%;
        background: #000;
        transition: .5s
    }

    /* Questão 2 */
    #fixado {
        position: fixed;
        top: 0;
        right: 0;
        width: 300px;
        height: 300px;
        background: #ff0
    }
</style>
<!-- Questão 1 -->
<div id="deslizante"></div>

<!-- Questão 2 -->
<div id="fixado"></div>

<!-- Só para criar um ambiente com rolagem vertical -->
<div style="height: 1000px"></div>

<script>
    /* Questão 1*/
    var div = document.getElementById('deslizante');
    // Quando o mouse vai por cima
    div.addEventListener('mouseenter', function (event) {
        event.target.style.marginRight = 0;
    }, false);
    // Quando o mouse sai de cima
    div.addEventListener('mouseout', function (event) {
        event.target.style.marginRight = '-300px';
    }, false);

    /* Questão 2 */
    var div2 = document.getElementById('fixado');
    window.addEventListener('scroll', function () {
        if (window.pageYOffset > 400) {
            // Se a rolagem for maior que 400px
            div2.setAttribute('style', 'top: auto; bottom: 0');
        } else {
            // caso contrário
            div2.setAttribute('style', 'top: 0; bottom: auto');
        }
    });

</script>

 

[Omar~ 87]

Duplicou!!!

[marcelocardoso 6]

muito obrigado omar, vou testar....
qualquer coisa, retorno.

grato mesmo.