最後のattrの値を変更

Question

こんにちは私は視差のウェブサイトを作成するためにskrollr jsを使用しますが、セクションの高さはコンテンツに依存するのでセクションの高さはわからないので最後の属性を見つけ、セクションの高さ。例えば

：セクション1用

データ-800（attrが）セクション2用data-800="position:fixed;top:-$('section 1').height;"

データ-900になります（ATTR）data-900="position:fixed;top:-$('section 2').height;"

私の目標は、getであるだろうすべてのセクションの高さと属性

$('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>