1
scrollmagic의 "setPin"메서드를 사용하여 특정 순간에 요소를 고정 시키려고합니다. 나는 내 문제를 보여주기 위해 스크린 캐스트를 만들었다. https://www.dropbox.com/s/7r1xu1gdgm22is8/stick.mov?dl=0 나는 이미 scrollmagic (로고 크기 조정)으로 헤더 섹션을 조작하고있다. 파란색 막대가 고정 된 머리글 섹션에 도달하면 파란색 막대가 항상 표시되도록 막대기가 너무 길기를 원합니다. 그게 무슨 뜻인지 알기를 바란다. :) 기본적으로 scrollmagics setpin 메서드는 요소가 뷰포트 중심에 도달 할 때 트리거합니다. 엘리먼트가 내 붙어있는 머리글의 아래쪽 테두리에 "닿을 때"트리거를 원합니다. triggerHook 및 triggerElement 옵션 이전 또는 duration: 200ScrollMagic : 끈적 고정 요소의 맨 아래에 요소 고정
triggerHook이 핀을 트리거 화면에 위치 후
jQuery(document).ready(function($){
var controller = new ScrollMagic.Controller();
var introTl = new TimelineLite();
introTl.to(logoimg, 1, {width: 100, autoRound:false});
var introScene = new ScrollMagic.Scene({duration: 200}).setTween(introTl).addTo(controller);
var scene2 = new ScrollMagic.Scene({
triggerElement: "#actionbar"
})
.setPin("#actionbar")
.addTo(controller);
});