第13天的實作是在網頁中有一段文章和圖片，目標是螢幕向下滑動時，img元素會隨著螢幕捲動的位置，而顯示出來。
首先在window建立scroll事件，指當window滑動時即產生事件。
由於滑動會造成scroll事件的觸發過於頻繁，因此透過debounce()來降低發生重複事件的觸發。
function debounce(func, wait = 20, immediate = true) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
透過window.screenY取得螢幕滑動的長度，screenY可以代表螢幕向下移動的最高點螢幕的長度。
window.innerHeight是指螢幕畫面的長度，要得到螢幕的下方位置是用window.screenY＋window.innerHeight。
img.offsetTop可以取得元素離父層元素的距離，此時的父層元素為<body>透過這樣的方式可以取得元素頂點離網頁最上方的距離。
img.offsetTop+元素本身的高度img.height，可以得到元素最低點離網頁最上方的距離。
一開始的img的css效果使用opacity讓他透明度為0。
.slide-in {
opacity:0;
transition:all .5s;
}
目標是當螢幕向下滑動時，螢幕的最低點遇到img的一半位置時，就img顯示出來並有左右滑動進入效果。
當 img.offsetTop+(img.height/2)>window.screenY＋window.innerHeight就讓img加入顯示的css效果。
Image.classList.add('active')
.slide-in.active {
opacity:1;
transform:translateX(0%) scale(1);
}
要是螢幕的最高點遇到img的一半位置時，就是當img.offsetTop+(img.height/2) < window.screenY，就讓img移除Css效果。
Image.classList.remove('active')
這樣就可以達到向下滑動螢幕時，圖片會隨著螢幕的位置產生效果。
<div class="site-wrap">
<h1>Slide in on Scroll</h1>
<p>Consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate, corporis a qui libero ipsum delectus quidem dolor at nulla, adipisci veniam in reiciendis aut asperiores omnis blanditiis quod quas laborum nam! Fuga ad tempora in aspernatur pariaturlores sunt esse magni, ut, dignissimos.</p>
<img src="http://unsplash.it/400/400" class="align-left slide-in">
。
。
。
<img src="http://unsplash.it/400/400" class="align-right slide-in">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio maiores adipisci quibusdam repudiandae dolor vero placeat esse sit! Quibusdam saepe aperiam explicabo placeat optio, consequuntur nihil voluptatibus expedita quia vero perferendis, deserunt et incidunt eveniet temporibus doloremque possimus facilis. Possimus labore, officia dolore! Eaque ratione saepe, alias harum laboriosam deserunt laudantium blanditiis eum explicabo placeat reiciendis labore iste sint. Consectetur expedita dignissimos, non quos distinctio, eos rerum facilis eligendi. Asperiores laudantium, rerum ratione consequatur, culpa consectetur possimus atque ab tempore illum non dolor nesciunt. Neque, rerum. A vel non incidunt, quod doloremque dignissimos necessitatibus aliquid laboriosam architecto at cupiditate commodi expedita in, quae blanditiis. Deserunt labore sequi, repellat laboriosam est, doloremque culpa reiciendis tempore excepturi. Enim nostrum fugit itaque vel corporis ullam sed tenetur ipsa qui rem quam error sint, libero. Laboriosam rem, ratione. Autem blanditiis laborum neque repudiandae quam, cumque, voluptate veritatis itaque, placeat veniam ad nisi. Expedita, laborum reprehenderit ratione soluta velit natus, odit mollitia. Corporis rerum minima fugiat in nostrum. Assumenda natus cupiditate hic quidem ex, quas, amet ipsum esse dolore facilis beatae maxime qui inventore, iste? Maiores dignissimos dolore culpa debitis voluptatem harum, excepturi enim reiciendis, tempora ab ipsam illum aspernatur quasi qui porro saepe iure sunt eligendi tenetur quaerat ducimus quas sequi omnis aperiam suscipit! Molestiae obcaecati officiis quo, ratione eveniet, provident pariatur. Veniam quasi expedita distinctio, itaque molestiae sequi, dolorum nisi repellendus quia facilis iusto dignissimos nam? Tenetur fugit quos autem nihil, perspiciatis expedita enim tempore, alias ab maiores quis necessitatibus distinctio molestias eum, quidem. Delectus impedit quidem laborum, fugit vel neque quo, ipsam, quasi aspernatur quas odio nihil? Veniam amet reiciendis blanditiis quis reprehenderit repudiandae neque, ab ducimus, odit excepturi voluptate saepe ipsam. Voluptatem eum error voluptas porro officiis, amet! Molestias, fugit, ut! Tempore non magnam, amet, facere ducimus accusantium eos veritatis neque.</p>
</div>
scroll事件是指頁面或是元素可以被捲動。window.addEventListener('scroll', function(e) {})
pixels值。var y = window.scrollY
var intViewportHeight = window.innerHeight;
HTMLElement.offsetHeight
指元素的高度，包含上下內距和邊界的長度。
The HTMLElement.offsetHeight read-only property is the height of the element including vertical padding and borders, as an integer.
HTMLElement.offsetWidth
指元素的寬度，包含左右內內距和邊界的長度。
The HTMLElement.offsetWidth read-only property returns the layout width of an element. Typically, an element's offsetWidth is a measurement which includes the element borders, the element horizontal padding, the element vertical scrollbar (if present, if rendered) and the element CSS width.
HTMLElement.offsetLeft
指元素離offsetParent的距離，由offsetParent的左邊界至元素左邊界的距離。
Returns a double, the distance from this element's left border to its offsetParent's left border.
HTMLElement.offsetTop
指元素離offsetParent的距離，由offsetParent的上邊界至元素上邊界的距離。
The HTMLElement.offsetTop read-only property returns the distance of the current element relative to the top of the offsetParent node.
opacity: 1; 不透明
opacity: 0.5;
opacity: 0; 透明
Window.scrollY, offset
iThome鐵人賽
看影片追技術