總結一些自己在HTML網頁中常用的JS代碼段

1. 【導航效果】網頁下滾100像素後在id="fixed"中添加一個class="shrink"，移回時移除。class="shrink"

$(window).scroll(function() {
	if ($(document).scrollTop() > 100) {
		$('#fixed').addClass('shrink');
	} else {
		$('#fixed').removeClass('shrink');
	}
});

2. 【導航效果】當網頁下滾100像素後class="Nav"（假設它的height="50px"）變爲絕對定位，同時它下面的class="NavLayout"屬性中增加margin-top:50px佔據class="Nav"變爲絕對定位後留下的空間。

$(window).scroll(function(event){
	if($(window).scrollTop()>=100){
	$(".Nav").css({"position":"fixed","left":"0","top":"0","zIndex":"9999"});$(".NavLayout").css({"margin-top":"50px"})
	}else{$(".Nav").css({"position":"relative"});$(".NavLayout").css({"margin-top":"0"})}
});

3. 【視頻兼容性插件】video.js，兼容大部分電腦和手機。
   先引入兩個必要的文件（也可以在https://github.com/videojs/Video.js/releases下載），源碼的體積很大，建議用min版。

<link href="//vjs.zencdn.net/7.3.0/video-js.min.css" rel="stylesheet">
<script src="//vjs.zencdn.net/7.3.0/video.min.js"></script>

HTML部分，提供了三種視頻格式，視頻默認爲300px，如需修改，在video.min.js中搜索300px改成需要的數值就行了，或直接改爲100%。

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264"
      poster="縮略圖"
      data-setup="{}">
    <source src="http://視頻地址格式1.mp4" type='video/mp4' />
    <source src="http://視頻地址格式2.webm" type='video/webm' />
    <source src="http://視頻地址格式3.ogv" type='video/ogg' />
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>

4. 【網頁效果】wow.js（官網：https://wowjs.uk/ ），一個簡單好用的懶加載插件。
   引用文件wow.min.js（剩下的兩個css可以不引用，根據需求自己寫幾個動畫）

<link rel="stylesheet" href="https://wowjs.uk/css/style.css">
<link rel="stylesheet" href="https://wowjs.uk/css/libs/animate.css">
<script src="https://wowjs.uk/dist/wow.min.js"></script>
<div class="wow">
代碼段
</div>
<script>
new WOW().init();
</script>