마지막 attr 값 변경

Hello 나는 시차 정보 웹 사이트를 만들 때 skrollr js를 사용하지만 섹션 높이가 내용에 따라 다르므로 섹션의 높이를 알 수 없기 때문에 마지막 속성을 찾고 번호 값만 변경하면됩니다. 섹션 높이. 예를 들어마지막 attr 값 변경

: 섹션 1

데이터-800 (ATTR)입니다 섹션 2 data-800="position:fixed;top:-$('section 1').height;"

데이터-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>

,129에서 설정

출처

2017-04-27 Michael Neas

을'. – nem035

는 업데이트 :

마지막 데이터의 각 속성에 대한 주석으로 대상이되어야한다 : 유효한 값으로 단위를 필요로 top`

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

출처

2017-04-27 06:06:05 Jai

감사합니다. 어떤 섹션의 마지막 속성을 찾기 위해 유연한 코드를 작성하고 섹션 높이가 가장 큰 값을 대체해야합니다. –

@MichaelNeas 스 니펫을 추가 할 수 있습니다. – Jai

고맙습니다.하지만 잘 작동하지 않습니다. –

마지막 attr 값 변경

답변

관련 문제