Question

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

此表单位于页面顶部，当页面向下滚动185px时，会显示此div与我的表单，但顶部的那些已丢失CSS。

有没有办法可以在div中加载该表单的内容而不必再次创建字段？

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

enter image description here

如果我在这个固定的DIV上重复相同的形式，我的TOP形式就是这样：

enter image description here

固定栏： enter image description here

那么..有没有办法加载没有松散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>

LIVE VERSION：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;
        });
    });

Answer 2

问题是你有输入的重复ID， ID属性在HTML页面上应该是唯一的为每个属性创建一个类，然后修改你的javascript以使用类选择器初始化selectbox < / p>

$(".tipo_servico").selectbox();
$(".tipo_imovel").selectbox();
$(".tipo_dormitorios").selectbox();
$(".tipo_bairro").selectbox();
$(".tipo_valor").selectbox();
$(".tipo_obra").selectbox();

或者如果这些是您网页中的唯一选择，则只需一次初始化全部的调用

$('form select').selectbox();

Answer 3

您应该将两个元素都包装在父元素中。 position:fixed;父级与固定位置相同，然后将其固定为固定位置元素，将其更改为position:relative;。现在，您可以在要在Element中相对定位的元素上使用position:absolute;。

在固定div内加载表单

3 个答案: