javascript - 更改最后的属性值

Question

你好 我使用 skrollr js 创建视差网站但是因为我们不知道部分的高度因为部分高度取决于内容所以我需要找到最后一个属性并更改数值仅具有截面高度。

例如:

对于第 1 部分，data-800 (attr) 将为 data-800="position:fixed;top:-$('section 1').height;"

对于第 2 部分，data-900 (attr) 将为 data-900="position:fixed;top:-$('section 2').height;"

我的目标是获取任何部分的高度并将其设置在属性中

$('section').attr('data-800', 'position:fixed;top:-' + $('.section').height());
var s = skrollr.init({
    render: function(data) {
        console.log(data.curTop);
    }
});

html,
body {
  margin: 0;
  height:100%;
}

.grad0 {
    height:100%;
  position:fixed;
  top:0px;
  background-color: #FFAAAA;
    
 background-image: url(https://production-assets.codepen.io/assets/profile/profile-bg-8ff33bd9518be912289d4620cb48f21eb5c9a2e0b9577484126cfe10a5fb354f.svg);
}

.grad1 {
  position:fixed;
  background-color: #00FF00
}

.grad2 {
  position:fixed;
  top:800px;
  background-color: #0000FF
}
.grad3 {
  position:fixed;
  top:1200px;
  height:400px;
  background-color: #00FFFF
}
section {
  width:100%;
}
img {
  position: absolute;
  top:150px;
}

<section class="grad0 w60" data-0="top:0px;" data-400="top:0px;"  data-800="position:fixed;top:-400px;">
  <img src="http://www.cs.cmu.edu/~chuck/lennapg/len_top.jpg" data-0="left:0px" data-400="left:1600px;">
</section>
<section class="grad1" data-400="position:fixed;top:638px;" data-900="position:fixed;top:-400px;">
    <h1>Hello World</h1>
</section>
<section class="grad2"  data-0="position:fixed;top:800px;" data-400="position:fixed;top:800px;" data-800="position:fixed;top:000px;">
    content
</section>
<section class="grad3"  data-0="position:fixed;top:1200px;" data-400="position:fixed;top:1200px;" data-800="position:fixed;top:400px;">
    content
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js'></script>

Answer 1

更新:

正如您评论的每个最后一个数据属性应该是有针对性的:

$('section').each(function() {
  var $this = $(this)
  var dataset = Object.keys(this.dataset);
  $.each(dataset, function(i, item) {
    if (i === dataset.length - 1) {
      $this.attr('data-' + dataset[i], 'position:fixed;top:-' + $this.height());
      console.log($this[0].dataset);
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="grad0 w60" data-0="top:0px;" data-400="top:0px;" data-800="position:fixed;top:-400px;">
  <img src="http://www.cs.cmu.edu/~chuck/lennapg/len_top.jpg" data-0="left:0px" data-400="left:1600px;">
</section>
<section class="grad1" data-400="position:fixed;top:638px;" data-900="position:fixed;top:-400px;">
  <h1>Hello World</h1>
</section>
<section class="grad2" data-0="position:fixed;top:800px;" data-400="position:fixed;top:800px;" data-800="position:fixed;top:000px;">
  content
</section>
<section class="grad3" data-0="position:fixed;top:1200px;" data-400="position:fixed;top:1200px;" data-800="position:fixed;top:400px;">
  content
</section>