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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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