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 つの同じフォームを作成する理由はありません。1つだけ書いて、それを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 に答える