jquery - 在固定 div 内加载表单

Question

当页面向下滚动时，在固定的 div 中加载搜索表单时我遇到了一个小问题。

这个表单在页面的顶部，当页面向下滚动 185px 时，会出现这个 div 和我的表单，但顶部的那些已经丢失了 CSS。

有什么方法可以在固定的 div 中加载该表单的内容，而无需再次制作字段？

这是我的表单，没有在固定的 div 重复相同的表单:

如果我在这个固定的 DIV 上重复相同的表格，我的 TOP 表格看起来是这样的:

和固定栏:

那么.. 有没有松散的 css 加载表单的方法？

这是我加载固定柱的脚本:

$(function () {
        $("#fixed-bar").css({position:'fixed',top:'0px'}).hide();
        $(window).scroll(function () {
            if ($(this).scrollTop() > 185) {
                $('#fixed-bar').fadeIn(400);
            } else {
                $('#fixed-bar').fadeOut(600);
            }
        });
        $('.go-top').click(function () {
            $('html,body').animate({
                scrollTop: 0
            }, 1000);
            return false;
        });
    });

这是我的 html 表单:

<div id="top_busca">
            <form action="" method="get" class="">
                <div id="select_tipo_servico">
                    <select name="tipo_servico" id="tipo_servico" tabindex="1">
                        <option value="">Tipo de Serviço</option>
                        <option value="Aluguel">Aluguel</option>
                        <option value="Venda">Venda</option>
                    </select>
                </div>
                <div id="select_tipo_imovel">
                    <select name="tipo_imovel" id="tipo_imovel" tabindex="2">
                        <option value="">Tipo de Imóvel</option>
                        <option value="Apartamentos">Apartamentos</option>
                        <option value="Casas">Casas</option>
                        <option value="Plantas">Plantas</option>
                        <option value="Terrenos">Terrenos</option>
                    </select>
                </div>
                <div id="select_tipo_dormitorios">
                    <select name="tipo_dormitorios" id="tipo_dormitorios" tabindex="3">
                        <option value="">Dormitórios</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5_mais">5 ou mais</option>
                    </select>
                </div>
                <div id="select_tipo_bairro">
                    <select name="tipo_bairro" id="tipo_bairro" tabindex="4">
                        <option value="">Bairro</option>
                        <option value="Prolongamento Jardim Ângela Rosa">Prolongamento Jardim Ângela Rosa</option>
                        <option value="Santa Terezinha">Santa Terezinha</option>
                        <option value="Centro">Centro</option>
                        <option value="Estação">Estação</option>
                        <option value="Distrito Industrial">Distrito Industrial</option>
                    </select>
                </div>
                <div id="select_tipo_valor">
                    <select name="tipo_valor" id="tipo_valor" tabindex="5">
                        <option value="">Valor</option>
                        <option value="xxxx">Até R$100.000</option>
                        <option value="xxxx">De R$100.001 à R$150.000</option>
                        <option value="xxxx">De R$150.001 à R$200.000</option>
                        <option value="xxxx">De R$200.001 à R$300.000</option>
                        <option value="xxxx">Acima de R$300.000</option>
                    </select>
                </div>
                <div id="select_tipo_obra">
                    <select name="tipo_obra" id="tipo_obra" tabindex="6">
                        <option value="">Estágio da Obra</option>
                        <option value="xxxx">Completa</option>
                        <option value="xxxx">Incompleta</option>

                    </select>
                </div>
                <input type="submit" class="bt_busca_top" value="" tabindex="7"/>
                <div class="clear"></div>
            </form>
        </div>  

实时版本:http://d-3.me/morar/imoveis.html

Answer 1

没有理由在 1 个页面上制作 2 个相同的表单。您可以只编写一个并将其存储到 javascript 变量中。将表格放入 <div id="my_form_holder"></div>并使用以下内容:

var MY_FORM_HOLDER = $("div#my_form_holder"); //gets holder element
var MY_FORM = MY_FORM_HOLDER.html(); //stores it's content (form) into variable
MY_FORM_HOLDER.remove(); //removes holder

现在您可以附加 MY_FORM到默认位置。滚动页面时，将默认位置的html设置为NULL并附加MY_FORM到固定的顶部栏，反之亦然。

以你的例子为例:

$(function () {
        $("#fixed-bar").css({position:'fixed',top:'0px'}).hide();
        $(window).scroll(function () {
            if ($(this).scrollTop() > 185) {
                $('#fixed-bar').fadeIn(400);
                //$(ON_PAGE_FORM_HOLDER).html(""); //clear previous form that was on page
                //$(this).find(YOUR_FORM_HOLDER_IN_FIXED_BAR).html(MY_FORM); //of course, you will need to find here the right child of #fixed-bar which you want to hold form.
            } else {
                $('#fixed-bar').fadeOut({ 
                  duration: 600,
                  complete: function() {
                    //$(this).find(YOUR_FORM_HOLDER_IN_FIXED_BAR).html("");
                    //$(ON_PAGE_FORM_HOLDER).html(MY_FORM);
                  }
                });
            }
        });
        $('.go-top').click(function () {
            $('html,body').animate({
                scrollTop: 0
            }, 1000);
            return false;
        });
    });