Floating Div in Bootstrap 3 accompanying Scroll

Question

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 it follow the scroll, because the page generates a query in the real estate bank. I want to give the option to the user 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?

Answer 1

As you are using Bootstrap, take a look at the tool affix http://getbootstrap.com/javascript/#affix

She’s responsible for doing this div "Floating".

Here is another example: http://www.w3schools.com/bootstrap/bootstrap_affix.asp

---

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 make only the plugin affix (affix + features - see link I passed above).

---

Edited:

Tip: You’re using a lot of tag <br /><br /> to create spacing between the form-group. I don’t know what the purpose of this is, but I advise using a margin property in the class form-group, so you make 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
}