Div Floating in Bootstrap 3 following Scroll

1

Good morning!

I have the following code:

<div class="container">
    <div class="row">
        <div class="col-md-5">
                <?php
                $hostdb = "**********";
                $userdb = "**********";
                $passdb = "**********";
                $tabledb = "**********";

                $conecta = mysql_connect($hostdb, $userdb, $passdb) or die (mysql_error());
                @mysql_select_db($tabledb, $conecta) or die ("Erro ao conectar com o banco de dados");
                mysql_set_charset('UTF8');

                $busca_query = mysql_query("SELECT * FROM imoveisvenda WHERE imoveisvenda.dormitorio = 1 UNION ALL SELECT * FROM imoveislocacao WHERE imoveislocacao.dormitorio = 1")or die(mysql_error());

                if (empty($busca_query)) {
                    echo "Nenhum registro encontrado.";
                }

                while ($dados = mysql_fetch_array($busca_query)) { ?>
                <img src="<?php echo "$dados[bancoimgthumb]";?>" class="img-responsive"> <?php
                echo "<b>Imóvel:</b> $dados[imovel]<br />"; 
                echo "<b>Localização:</b> $dados[localizacao]<br />"; ?>
                <p style="color:red"><b>Tipo: <?php echo "$dados[tipo]"; ?></b></p>
                <b>MAIS DETALHES:</b> <a href="<?php echo "$dados[file]"; ?>?id=<?php echo "$dados[id]";?>">Clique aqui!</a><br />
                <?php echo "<hr>";
            }
            ?>
        </div>
        <div class="container">
            <div class="col-md-7 banner">
                <form class="form form-inline" role="form">
                    <legend style="margin-top:1.5%;">Busca Avançada</legend> <br>
                    <div class="form-group col-md-12">
                        <label for="bairro" class="col-md-6">Cidade</label>
                        <div class="col-md-6">
                            <select id="cidade" name="cidade" class="form-control">
                                <option>Carmo de Minas</option>
                                <option>Itamonte</option>
                                <option>Itanhandu</option>
                                <option>Passa Quatro</option>
                                <option>Pouso Alto</option>
                                <option>Soledade de Minas</option>
                                <option>São Lourenço</option>
                            </select>
                        </div>
                    </div>
                    <br><br>
                    <div class="form-group col-md-12">
                        <label for="bairro" class="col-md-6">Bairro</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="bairro" placeholder="Bairro">
                        </div>
                    </div>
                    <br><br>
                    <div class="form-group col-md-12">
                        <label for="valor" class="col-md-6">Valor</label>
                        <div class="col-md-6">
                            <input type="text" class="form-control" id="valor" placeholder="Valor">
                        </div>
                    </div>
                    <br><br>
                    <div class="form-group col-md-12">
                        <label for="dormitorios" class="col-md-6">Dormitórios</label>
                        <div class="col-md-6">
                            <input type="checkbox" value="1" name="1"> 01 &nbsp;&nbsp;
                            <input type="checkbox" value="2" name="2"> 02 &nbsp;&nbsp;
                            <input type="checkbox" value="3" name="3"> 03 &nbsp;&nbsp;
                            <input type="checkbox" value="4" name="4"> 04 &nbsp;&nbsp;
                            <input type="checkbox" value="5" name="5"> 05
                        </div>
                    </div>
                    <br><br>
                    <div class="form-group col-md-12">
                        <label for="garagem" class="col-md-6">Garagem</label>
                        <div class="col-md-6">
                            <input type="checkbox" value="1" name="1"> 01 &nbsp;&nbsp;
                            <input type="checkbox" value="2" name="2"> 02 &nbsp;&nbsp;
                            <input type="checkbox" value="3" name="3"> 03 &nbsp;&nbsp;
                        </div>
                    </div>
                    <br><br>
                    <div class="form-group col-md-12">
                        <label for="tipo" class="col-md-6">Tipo</label>
                        <div class="col-md-6">
                            <input type="checkbox" value="residencial" name="1"> Residencial &nbsp;&nbsp;
                            <input type="checkbox" value="comercial" name="2"> Comercial &nbsp;&nbsp;
                            <input type="checkbox" value="rural" name="3"> Rural &nbsp;&nbsp;
                        </div>
                    </div>
                    <br><br>
                    <div class="form-group col-md-12">
                        <button type="submit" class="btn btn-default col-md-6 col-md-offset-6">Realizar Busca</button>
                    </div>
                    <br><br>
                </form>
            </div>
        </div>
    </div>
</div>

The div on my right side, col-md-7 banner is a div with an "Advanced Search". I would like to make her follow the scroll, because the page generates an inquiry on the bank of real estate. I want to give the user the option to do an advanced search if he wants, anywhere on the page.

I have tested several codes, unfortunately none worked the way I wanted.

Can you help me?

    
asked by anonymous 05.01.2016 / 16:19

1 answer

4

As you are using Bootstrap, take a look at the affix link tool

She is responsible for making this div "Floating".

Here's another example: link

But remember, for this plugin to work, it is important that, in addition to adding the bootstrap css, you also add javascript. You can customize the download and only do the plugin affix (affix + depts - see link that I went through above).

Edited:

Tip: You are using a lot of <br /><br /> tag to create spacing between form-group blocks. I do not know what the purpose is, but I advise you to use a margin property in the form-group class, so you get your code cleaner, easier to maintain, and have the same result.

.form-group {
    margin: 0 0 20px 0; //cima direita baixo esquerda <-- ordem dos números
}
    
05.01.2016 / 16:51