Fixed side vertical fixed scroll menu

Question

Fixed side vertical fixed scroll menu

Navigation

#1 by (1 votes)
#2 by (-1 votes)

0

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

varlast_scroll;

Inwordpressthedivoftheelementgetsa"position: fixed" when it reaches the end and the beginning of the menu to stop interacting with the scrolling, and when scrolling it defide "position: absolute" and "top: NumeroQueNaoConsigoDazer".

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;
    }

});

javascript css menu sidebar

asked by anonymous 20.04.2016 / 00:09

2 answers

Get Table Id generated by setFetchMode (PDO :: FETCH_ASSOC) Classes and Include PHP

score 1 · Answer 1

Possible solution!

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

float: left; // Float element on the left
height: 100vh; // vh is a unit of measure! In it you get 100% of viewport (device screen size)
overflow: auto; // Add scrollbar if internal items exceed 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>

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

score -1 · Answer 2

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

But it's very simple, just call the jQuery plugin in head and implement small changes in CSS.

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