Fixed side vertical menu with limited scrolling

Question

How do I make a menu like that of Wordpress that is vertical, fixed and has a scrolling of its own that is limited to its ends:

var last_scroll;

In wordpress the element div gets a "position:Fixed" when arriving at the end and at the beginning of the menu to stop interacting with the scrolling, and when scrolling it defide "position:Absolute" and "top:Numeroquenaoconsigofazer".

I was trying to do with javascript but it’s impossible:

$(window).scroll(function(event) {
    element = $('#sidebar_main');
    p_current = $(this).scrollTop();
    h_nav = element.height();
    h_screen = $(window).height();

    if(h_nav > h_screen){//se maior que a tela
        h = (h_nav - h_screen)+40;

        if(p_current > last_scroll){//se desce
            if(p_current>=h){//se já chegou no fim
                element.css({
                    'position': 'fixed',
                    'bottom': '0',
                    'top': 'auto'
                });
            }else{
                if(element.css('top') == 'auto'){
                    element.css('top', 0);
                }
                element.css({
                    'top': '+=1px',
                    'position': 'absolute',
                    'bottom': 'auto'
                });
            }
        }else{//se sobe

            if(p_current<=0){//se já chegou no começo
                element.css({
                    'top': '0',
                    'bottom': 'auto'
                });
            }else{
                //if(element.offset().top <= h || element.css('top') == 'auto'){


                    if(element.css('top') == 'auto'){
                        element.css('top', element.offset().top);
                    }
                    element.css({
                        'top': '-=1px',
                        'position': 'absolute',
                        'bottom': 'auto'
                    });
                }
            //}
        }

        last_scroll = p_current;
    }

});

Answer 1

Possible solution!

I added an element nav and in it I applied some css directives

• float: left; // Float element on the left
• height: 100vh; // vh is a unit of measure! In it you take 100% of the viewport (device screen size)
• overflow: auto; // Add the scrollbar if the internal items exceed the limit height

#nav-lateral {
  background-color: green;
  float: left;
  border-bottom-right-radius: 2px;
  height:  100vh;
  overflow: auto;
}

#nav-lateral a, ul >li {
  list-style: none;
  text-decoration: none;
  background-color: yellow;
  border-radius: 2px;
  padding: 5px 5px 5px 5px;
  /*top left bottom right*/
}

#nav-lateral ul {
  margin-right: 20px;
}

#nav-lateral ul li{
  margin-top: 10px;
  margin-right: 10px;
  width: 150px;
}

<nav id="nav-lateral">
  <ul>
    <li>Menu 1</li>
    <li>Menu 2</li>
    <li>Menu 3</li>
    <li>Menu 4</li>
    <li>Menu 5</li>
    <li>Menu 6</li>
    <li>Menu 7</li>
    <li>Menu 8</li>
    <li>Menu 9</li>
    <li>Menu 10</li>
    <li>Menu 11</li>
    <li>Menu 12</li>

  </ul>
</nav>

<div>Resto do conteúdo</div>

Obs.: Note that when you click Executar trecho de código will create the scroll bar now click on Página toda the bar disappears!

Answer 2

This site has a tutorial, they use a JS plugin, just you look at the code and implement in your... http://www.criarsites.me/tutoriais/menu-scroll-fixo-jquery/

But it’s quite simple, just call the jQuery plugin on head and implement small changes in CSS.

<script src="js/jquery-1.6.3.min.js"></script>