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;"

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

中

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

更新：

正如您评论的每个最后一个数据属性应该被定位：

＆＃13;

$('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);
    }
  })
});

＆＃13;

<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>

＆＃13;

改变最后的attr值

1 个答案: