• JS
  • J볃교

SCROLL TOP을 이용하여 네이버처럼 동영상 제어하기

2018-12-26 360

설명

  • 카카오톡 링크

SCROLL TOP을 이용하여 네이버처럼 동영상 제어하는 소스입니다~!

소스실행 현황

소스보기( X표시가 나타나면 무시하셔도 됩니다! )

<style>
	.movie_wrap {display:inline-block; width:100%; height:3500px; background:#f2849e}
	.movie_box {display:inline-block; z-index:10}
	.movie_box.on {position:fixed; left:2.5%; bottom:2.5%; box-sizing:border-box; border:1px solid #dfdfdf; box-shadow:0 0 8px rgba(0,0,0,0.05);
	-webkit-appearance: none;
	-webkit-box-shadow: 0 0 8px rgba(0,0,0,0.05);
	box-shadow: 0 0 8px rgba(0,0,0,0.05);

	}
	.movie_box video {width:300px; height:300px; background:#fff}
</style>
<script type="text/javascript">
$(document).ready(function() {
	header_height = $("#header").height();
	movie_box_top = ($(".movie_box").offset().top + $(".movie_box").height()) - header_height;
	
});
$(window).on('scroll',function(){
	var now_scroll = $(window).scrollTop(); // 현재 스크롤 위치
	//console.log(now_scroll + "/" + movie_box_top);
	if(now_scroll > movie_box_top) {
		if(!$(".movie_box").hasClass("on")) {
			$(".movie_box").addClass("on");
		}
	} else {
		if($(".movie_box").hasClass("on")) {
			$(".movie_box").removeClass("on");
		}
	}
})
</script>
<div class="movie_wrap">
	<div class="movie_box">
		<video class="video" controls="">
			<source src="/movie/source_mobile_example.mp4" type="video/mp4">
		</video>
	</div>
</div>