更改滚动长度

Question

我正在尝试制作这些盒子＆＃34; rope_2＆＃34; ＆安培; ＆＃34; rope_3＆＃34;改变长度看起来像是作为绳索附着在固定的盒子上。这将使它具有电梯效果。 我已经尝试使用.animate，.css和transform，JQueryTransit，并切换逗号和引用以使其工作，但似乎没有任何工作。我只是使用不正确的语法或什么？如果有人有一种不同的简单想法试图完成我想要做的事情，那我就是张开耳朵。

＆＃13;

＆＃13;

package net.pocketcraftgaming.pocketcraftgaming;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.webkit.WebView;
import android.view.Menu;
import android.view.MenuItem;

public class WebMainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_web_main);

    String url ="http://www.pocketcraftgaming.net/";
    WebView view =(WebView) this.findViewById(R.id.webView);
    view.getSettings().setJavaScriptEnabled(true);
    view.loadUrl(url);
}
}

＆＃13;

/* 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);
}

＆＃13;

.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;
}

＆＃13;

＆＃13;

＆＃13;

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>