Headroom js 사용법 소개
.headroom {
transition: transform 200ms linear;
display: block;
height: 300px;
width: auto;
background-color: red;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
background-color: green;
}
class 를 통 해 속성 설정
2. js 호출
//
var myElement=Document.querySelector("header");
var headroom=new Headroom(myElelemt);//Headroom
headroom.init();
3. 전달 매개 변수
var headroom = new Headroom(elem, {
"tolerance": 5,
"offset": 205,
"classes": {
"initial": "animated",
"pinned": "slideDown",
"unpinned": "slideUp"
}});
headroom.init();
// to destroy
headroom.destroy();
<script src="headroom.min.js"/>
<style>
.headroom {
transition: transform 200ms linear;
display: block;
height: 300px;
width: auto;
background-color: red;
}
.headroom--pinned {
transform: translateY(0%);
}
.headroom--unpinned {
transform: translateY(-100%);
background-color: green;
}
#div1{
height: 10000px;
background-color: #666666;
}
</style>
<header id="header"/>
<div id="div1">
</div>
<script>
var elem=document.querySelector("header");
var headroom = new Headroom(elem, {
"tolerance": 1,
"offset": 20,
"classes": {
"initial": "headroom",
"pinned": "headroom--pinned",
"unpinned": "headroom--unpinned"
}
});
headroom.init();
</script>
</code></pre>
</article>
</div>
</div> 이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
