자바스크립트(Javascript) 제이쿼리(JQuery)로 Sticky 기능 및 재미있는것 만들어보기

우선 역시 실행영상~

https://www.w3schools.com
에서 찾아보면 역시 코드가 있는데 가져와서 응용해서 만들어 보았다.

전체코드는 아래 깃헙링크에 있음,, 전체 프로젝트중 일부분만 따온거라 찾기 힘들수도 있지만 일단 첨부,,
https://github.com/leehyolim/Balpoom
html, css까지 올리면 너무 지저분해 질것 같아서 생략하고 자바스크립트 코드만

맨아래에 아래 함수 들이 있다.
openNav() #mySidenav의 width속성을 500px로 만들어줌 -> 튀어나오도록
closeNav() #mySidenav의 width속성을 0로 만들어줌 -> 들어가서 안보이도록
해준다.

#choice라는 select태그의 값이 어떤 값이냐에 따라 밑에 있는 태그들이
유동적으로 바뀌게끔 짜주었다.
조금 지저분하지만 겁나 솔직하고 직관적이게 짰다.
더 좋은방법이 있겠지만 느낌가는데로,,,~


$(document).ready(function(){
  var output = "";
  if($("#choice > option:selected").val()=='Bottom'){
    output +='<label>총 기 장 : </label> <input type="text" name="length" placeholder="Enter Your Cm"/><br>';
    output +='<label>허&nbsp;&nbsp;&nbsp;&nbsp; 리 : </label> <input type="text" name="waist" placeholder="Enter Your Cm"/><br>';
    output +='<label>밑&nbsp;&nbsp;&nbsp;&nbsp; 위 : </label><input type="text" name="rise" placeholder="Enter Your Cm"/><br>';
    output +='<label>허 벅 지 : </label> <input type="text" name="thigh" placeholder="Enter Your Cm"/><br>';
    output +='<label>밑&nbsp;&nbsp;&nbsp;&nbsp; 단 : </label><input type="text" name="hem" placeholder="Enter Your Cm"/><br>';
    output +='<input type="submit" value="Search" />';
    $("#fitple-form").append(output);
  }else if ($("#choice > option:selected").val()=='Outer') {
    output +='<label>어&nbsp;&nbsp;&nbsp;&nbsp; 깨 : </label> <input type="text" name="shoulder" placeholder="Enter Your Cm"/><br>';
    output +='<label>암&nbsp;&nbsp;&nbsp;&nbsp; 홀 : </label> <input type="text" name="armhole" placeholder="Enter Your Cm"/><br>';
    output +='<label>가슴단면 : </label><input type="text" name="chest" placeholder="Enter Your Cm"/><br>';
    output +='<label>소매길이 : </label> <input type="text" name="sleeve" placeholder="Enter Your Cm"/><br>';
    output +='<label>총 기 장 : </label><input type="text" name="length" placeholder="Enter Your Cm"/><br>';
    output +='<input type="submit" value="Search" />';
    $("#fitple-form").append(output);
  }else if ($("#choice > option:selected").val()=='Top') {
    output +='<label>어&nbsp;&nbsp;&nbsp;&nbsp; 깨 : </label> <input type="text" name="shoulder" placeholder="Enter Your Cm"/><br>';
    output +='<label>암&nbsp;&nbsp;&nbsp;&nbsp; 홀 : </label> <input type="text" name="armhole" placeholder="Enter Your Cm"/><br>';
    output +='<label>가슴단면 : </label><input type="text" name="chest" placeholder="Enter Your Cm"/><br>';
    output +='<label>소매길이 : </label> <input type="text" name="sleeve" placeholder="Enter Your Cm"/><br>';
    output +='<label>총 기 장 : </label><input type="text" name="length" placeholder="Enter Your Cm"/><br>';
    output +='<input type="submit" value="Search" />';
    $("#fitple-form").append(output);
  }
  // alert($("#choice > option:selected").val());
  $("#choice").change(function(){
    var output = "";
    if($("#choice > option:selected").val()=='Bottom'){
      output +='<label>총 기 장 : </label> <input type="text" name="length" placeholder="Enter Your Cm"/><br>';
      output +='<label>허&nbsp;&nbsp;&nbsp;&nbsp; 리 : </label> <input type="text" name="waist" placeholder="Enter Your Cm"/><br>';
      output +='<label>밑&nbsp;&nbsp;&nbsp;&nbsp; 위 : </label><input type="text" name="rise" placeholder="Enter Your Cm"/><br>';
      output +='<label>허 벅 지 : </label> <input type="text" name="thigh" placeholder="Enter Your Cm"/><br>';
      output +='<label>밑&nbsp;&nbsp;&nbsp;&nbsp; 단 : </label><input type="text" name="hem" placeholder="Enter Your Cm"/><br>';
      output +='<input type="submit" value="Search" />';
      $("#fitple-form").empty();
      $("#fitple-form").append(output);
    }else if ($("#choice > option:selected").val()=='Outer') {
      output +='<label>어&nbsp;&nbsp;&nbsp;&nbsp; 깨 : </label> <input type="text" name="shoulder" placeholder="Enter Your Cm"/><br>';
      output +='<label>암&nbsp;&nbsp;&nbsp;&nbsp; 홀 : </label> <input type="text" name="armhole" placeholder="Enter Your Cm"/><br>';
      output +='<label>가슴단면 : </label><input type="text" name="chest" placeholder="Enter Your Cm"/><br>';
      output +='<label>소매길이 : </label> <input type="text" name="sleeve" placeholder="Enter Your Cm"/><br>';
      output +='<label>총 기 장 : </label><input type="text" name="length" placeholder="Enter Your Cm"/><br>';
      output +='<input type="submit" value="Search" />';
      $("#fitple-form").empty();
      $("#fitple-form").append(output);
    }else if ($("#choice > option:selected").val()=='Top') {
      output +='<label>어&nbsp;&nbsp;&nbsp;&nbsp; 깨 : </label> <input type="text" name="shoulder" placeholder="Enter Your Cm"/><br>';
      output +='<label>암&nbsp;&nbsp;&nbsp;&nbsp; 홀 : </label> <input type="text" name="armhole" placeholder="Enter Your Cm"/><br>';
      output +='<label>가슴단면 : </label><input type="text" name="chest" placeholder="Enter Your Cm"/><br>';
      output +='<label>소매길이 : </label> <input type="text" name="sleeve" placeholder="Enter Your Cm"/><br>';
      output +='<label>총 기 장 : </label><input type="text" name="length" placeholder="Enter Your Cm"/><br>';
      output +='<input type="submit" value="Search" />';
      $("#fitple-form").empty();
      $("#fitple-form").append(output);
    }
  });
});

function openNav() {
    document.getElementById("mySidenav").style.width = "500px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}