고정 된 div 안에 폼로드하기

Question

페이지가 스크롤 될 때 고정 된 div 안에 검색 폼을로드 할 때 약간의 문제가 있습니다.

이 양식은 페이지 상단에 있으며 페이지가 185px 아래로 스크롤 될 때 양식과 함께이 div가 표시되지만 상단의 CSS는 CSS를 잃어 버렸습니다.

필드를 다시 만들 필요없이 고정 된 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

2를 만들기위한 이유가 없다 한 페이지에 같은 양식. 하나만 작성하고 자바 스크립트 변수에 저장할 수 있습니다. 다음 <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 기본 에 위치를 추가 할 수 있습니다. 페이지가 스크롤 될 때 기본값 인 위치를 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 페이지에서 고유 한 다음에 자바 스크립트를 수정해야합니다 : 귀하의 예를 들어

그 초기화 페이지에있는 유일한 선택을 하나의 전화를하는 경우 클래스 선택기를 사용하여 선택 박스를 초기화

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

또는

모두

0 가장 좋은 것입니다

Answer 3

부모 요소에 두 요소를 모두 래핑해야합니다. position:fixed; 부모님이 고정 된 위치와 같은 방식으로 고정 위치 요소를 고정하는 대신 position:relative;으로 변경하십시오. 이제 상대적으로 배치 된 요소 내부에 고정하고자하는 요소에 position:absolute;을 사용할 수 있습니다.