---
tags: L4
---
# onScroll ＆hover 漸變
## Q: scroll到某個高度nav改為fixed
1. 抓scrollY
2. 新增帶fixed屬性的className
3. 若滑上去要取消，也要記得把className刪掉
### JS作法（Ｗ3C）
https://www.w3schools.com/jsref/event_onscroll.asp

window.onscroll = function() {myFunction()};

function myFunction() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.getElementById("myP").className = "test";
  } else {
    document.getElementById("myP").className = "";
  }
}

### 補充資料：js增加class或者删除class
https://blog.csdn.net/liuwengai/article/details/78795969

### jQuery .scroll()
http://www.eion.com.tw/Blogger/?Pid=1154

$(function () {
  $(window).scroll(function () {
    var scrollVal = $(this).scrollTop();
    $("span.qScrollTop").text(scrollVal);
  });
});

### [jQuery] 動態新增及移除_Dynamic add and remove block(.append(), .remove())
http://imdori.blogspot.com/2013/08/jquery-dynamic-add-and-remove.html

### hover漸變

速度： 0-1s
https://www.w3schools.com/css/css3_transitions.asp

在這兩個都加transition屬性

.polaroidframe {
    ...
    transition: all .5s ease-in-out; 
}
.polaroidframe:hover {
    ...
    transition: all .5s ease-in-out; 
}