1

Estoy tratando de colocar un boton fijo al final del contenido pero cuando hago scroll este se sube, quiero que se quede estático y no se mueva, que solo haga scroll los items...

<!DOCTYPE>
<html charsfet>
    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <script>
        $(document).ready(function(){
            $('#Slide button').click(function(){
                $('#Slide ul').slideToggle();
            });
            $('#Slide ul').click(function(e){
                e.stopPropagation();
            });
        });
    </script>
    <body>
        <div id="Slide">    
            <button class="">                            
                <span class="">Sector</span>
            </button>
            <ul style="display: none; background-color: red; height: 150px; overflow: auto; position: relative;">
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>   
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>

                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <button style="position: absolute; bottom: 0;">Aplicar</button>                                
            </ul>
        </div>
    </body>
</html>

4 respuestas 4

1

Si sitúas el botón después de la etiqueta <ul></ul> el botón se queda fijo mientras la lista hace scroll. Al estar dentro de la etiqueta <ul></ul> el botón es considerado parte de la lista y se mueve con ella.

<!DOCTYPE>
<html charsfet>
    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <script>
        $(document).ready(function(){
            $('#Slide button').click(function(){
                $('#Slide ul').slideToggle();
            });
            $('#Slide ul').click(function(e){
                e.stopPropagation();
            });
        });
    </script>
    <body>
        <div id="Slide">    
            <button class="">                            
                <span class="">Sector</span>
            </button>
            <ul style="display: none; background-color: red; height: 150px; overflow: auto; position: relative;">
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>   
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>

                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>                                
            </ul>
          <button style="position: absolute; bottom: 0;">Aplicar</button> 
        </div>
    </body>
</html>

Espero que te sirva!

2
  • el boton tiene que estar dentro de la lista.
    – zerokira
    el 6 jun. 2018 a las 14:05
  • Si mal no me equivoco, si el botón se encuentra dentro de la lista, hará scroll con ella.
    – Exe
    el 6 jun. 2018 a las 14:12
1

Lo primero es que si el botón va a estar dentro de la lista <ul> entonces debes meterlo dentro de un <li>, es simple estructura de HTML, ahora quilate el height fijo a la lista y colócalo auto, como el botón está en posición absoluta se pega al bottom del height.

<!DOCTYPE>
<html charsfet>
    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <script>
        $(document).ready(function(){
            $('#Slide button').click(function(){
                $('#Slide ul').slideToggle();
            });
            $('#Slide ul').click(function(e){
                e.stopPropagation();
            });
        });
    </script>
    <body>
        <div id="Slide">    
            <button class="">                            
                <span class="">Sector</span>
            </button>
            <ul style="display: none; background-color: red; height: auto; overflow: auto; position: relative;">
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>   
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>

                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                  <button style="position: absolute; bottom: 0;">Aplicar</button>
                </li>
            </ul>
        </div>
    </body>
</html>

0

Sólo agrega position: fixed al botón

<!DOCTYPE>
<html charsfet>
    <head>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <script>
        $(document).ready(function(){
            $('#Slide button').click(function(){
                $('#Slide ul').slideToggle();
            });
            $('#Slide ul').click(function(e){
                e.stopPropagation();
            });
        });
    </script>
    <body>
        <div id="Slide">    
            <button class="">                            
                <span class="">Sector</span>
            </button>
            <ul style="display: none; background-color: red; height: auto; overflow: auto; position: relative;">
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>   
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>

                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                    <label>
                        <input type="checkbox"/>
                        algo
                    </label>
                </li>
                <li>
                  <button style="position: fixed; bottom: 0;">Aplicar</button>
                </li>
            </ul>
        </div>
    </body>
</html>

0

El problema esta en el css de tu boton... tienes un positionj: absolute y debería ser un position: fixed para indicarle que este es fijo.

tu css deberia ser asi:

.boton{
    position: fixed;
    bottom: 0;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.