0

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

此表单位于页面顶部，当页面向下滚动 185 像素时，此 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

4

3 回答 3

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;
        });
    });
于 2013-07-20T00:01:59.190 回答
1

问题是您的输入有重复的 id，ID 属性在 HTML 页面上应该是唯一的，为它们中的每一个创建一个类，然后修改您的 javascript 以使用类选择器初始化选择框

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

或者，如果这些是您页面中唯一的选择，则最好只调用一次来初始化所有选项

$('form select').selectbox();
于 2013-07-20T00:04:22.370 回答
0

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

于 2013-07-20T00:09:47.877 回答