更改最后的属性值

Question

你好我使用skrollr js来创建视差网站，但由于我们不知道节的高度，因为节高度取决于内容，所以我需要的是仅查找最后一个属性和更改数值与部分高度。

例如：

为第1数据-800（attr）使用将data-800="position:fixed;top:-$('section 1').height;"

为第2数据-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>