javascript - 更改滚动长度

Question

我正在尝试使这些盒子“rope_2”和“rope_3”改变长度，使其看起来像作为绳索连接到固定盒子上。这将给它带来电梯效应。我尝试过使用 .animate、.css 和转换、JQueryTransit，并切换逗号和引号以使其正常工作，但似乎没有任何效果。我只是使用了不正确的语法还是其他什么？如果有人有一个不同的更简单的想法来尝试完成我想做的事情，我会倾听。

/* Scott Louzon 11/24/15
This code is used to lenthen the rope to hit the top of platform */

/*This function see's when user scrolls then calls lengthen & shoreten()
accordingly */
var scroll_at = 0;                              //variable to keep track of
                                                //scroll postion
$(window).scroll(function() {
    if ($(this).scrollTop() > 0)                //if scroll postion is not at
    {                                           //top do this
      if ($(this).scrollTop() > scroll_at)      //if scroll postion is > than b4
      {
        lengthen();
      }
      else if ($(this).scrollTop() < scroll_at) //if scroll postion is < than b4
      {
        shorten();
      }

      scroll_at = $(this).scrollTop();          //set varible to were scroll
                                                //postion is at now
    }
})

//Both these functions change the height of object .rope_2, and .rope_3
var height_var = 23;

function lengthen()
{
  height_var += 10;
  $(".rope_2").animate({'height': height_var + "px"}, 500);
  $(".rope_3").animate({'height': height_var + "px"}, 500);
}

function shorten()
{
  height_var += 10;
  $(".rope_2").animate({'height': height_var + "px"}, 500);
  $(".rope_3").animate({'height': height_var + "px"}, 500);
}

.rope_2
{
  position: absolute;

  margin: 0;
  padding: 0;

  top: 277px;
  left: 88.9%;

  /* Using for rope lengthening */
  transition: transform 1ms;

  width: 2.5px;
  height: 23px;

  border-style: ridge;
  border-width: thin;
  border-color: #996633;

  background-color: #CCCC99;

  z-index: +1;
}

.rope_3
{
  position: absolute;

  margin: 0;
  padding: 0;

  top: 277px;
  left: 94.45%;

  /* Using for rope lengthening */
  transition: transform 1ms;

  width: 2.5px;
  height: 23px;

  border-style: ridge;
  border-width: thin;
  border-color: #996633;

  background-color: #CCCC99;

  z-index: +1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Platform rope -->
    <div class="rope_1">
    </div>

    <div class="rope_2">
    </div>

    <div class="rope_3">
    </div>

    <div class="rope_4">
    </div>

Answer 1

经过一周的研究，我已经弄清楚如何做我想做的事情，当然这很简单......

关键是使用:.height()

/* Scott Louzon 12/1/15
This code is used to lenthen and shorten the rope to hit the top of platform */

// This function see's when user scrolls then changes the rope accordingly
$(window).scroll(function() {
    //Set height to 23 plus however many pixels are out of view
    if ($(this).scrollTop() > 0)                //if scroll postion is'nt at top
    {
      $(".rope_2, .rope_3").height(23 + $(this).scrollTop());
    }
    //Set height to 23
    else                                        //if scroll position is at top
    {
      $(".rope_2, .rope_3").height(23);
    }
})

/* Rope's */

.rope_1 {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 277px;
  left: 87.2%;
  width: 2.5px;
  height: 50px;
  border-style: ridge;
  border-width: thin;
  border-color: #996633;
  background-color: #CCCC99;
}
.rope_2 {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 277px;
  left: 88.9%;
  width: 2.5px;
  height: 23px;
  border-style: ridge;
  border-width: thin;
  border-color: #996633;
  border-bottom: 0px;
  border-top: 0px;
  background-color: #CCCC99;
  z-index: +1;
}
.rope_3 {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 277px;
  left: 94.45%;
  width: 2.5px;
  height: 23px;
  border-style: ridge;
  border-width: thin;
  border-color: #996633;
  border-bottom: 0px;
  border-top: 0px;
  background-color: #CCCC99;
  z-index: +1;
}
.rope_4 {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 277px;
  left: 95.97%;
  width: 2.5px;
  height: 50px;
  border-style: ridge;
  border-width: thin;
  border-color: #996633;
  background-color: #CCCC99;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Platform rope -->
<div class="rope_1">
</div>

<div class="rope_2">
</div>

<div class="rope_3">
</div>

<div class="rope_4">
</div>


<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="ropes.js"></script>