总结一些自己在HTML网页中常用的JS代码段

1.根据class="test1"的高度计算test2中margin-top的偏移量

window.onload=function(){
	$(".test2").css("marginTop",$(".test1").height());
}

2.【导航效果】网页下滚100像素后在id="fixed"中添加一个class="shrink"，移回时移除。class="shrink"

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

3.【导航效果】当网页下滚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"})}
});

4.【导航效果】当导航上面有一张自适应宽度的图片“HeadImage”时（自适应后高度不确定），应该如何确定导航下面的元素“NavLayout”的偏移量。

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

5.【视频兼容性插件】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>

6.【网页效果】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>

7.【视频效果】点击图片播放视频

<div class="Video">
	<video id="VideoPlay1" width="800" height="450" src="img/video.mp4" poster="img/video.jpg" loop="loop" x-webkit-airplay="true" webkit-playsinline="true">
	您的浏览器暂不支持播放该视频，请升级至最新版浏览器。
	</video>
</div>
<script>
var video1=document.getElementById("VideoPlay1");
video1.onclick=function(){
    if(video1.paused){
        video1.play();
    }else{
        video1.pause();
    }
}
</script>