<div id="NewsBox"<?# newsStyle ?>>
	<div class="workframe">
		<h2 class="title"><?# indexNTitle ?></h2>
		<ul id="newList">
			<php:repeater id="listN">
			<template>
			<li>
				<p><a href="<?# linkC ?>" title="<?# CategoryName ?>"><?# CategoryName ?></a></p>
				<font><?# OnlineDate ?></font>
				<h3><a class="text-clamp" href="<?# link ?>" title="<?# Title ?>"><?# Title ?></a></h3>
			</li>
			</template>
			</php:repeater>
		</ul>
		<p class="more"><a href="<?# indexNMLink ?>" title="<?# indexNMLinkTitle ?>"><span><?# indexNMLinkTitle ?></span><i class="fa fa-long-arrow-right"></i></a></p>
	</div>
</div>
<script>
    var h = $(window).height();
    var hs = ($(window).height() / 2);
    var h4s = ($(window).height() / 4);
	$(function(){
		$('#NewsBox ul').slick({
			autoplay: true,
			dots: false,
			arrows: false,
			infinite: true,
			speed: 300,
			slidesToShow: 1,
			adaptiveHeight: true
		});
	});
	$(window).scroll(function(){
		var scrollH = $(this).scrollTop();   //頁面滾動的高度 
		if(scrollH >= $("#nyBox").position().top){
			$('#nyBox #NewsBox').css('opacity', '1');
		}else{
			$('#nyBox #NewsBox').css('opacity', '0');
		}
		if(hs+scrollH > $('#newList').offset().top){
            $('#nyBox #NewsBox h2').css('opacity', '0');
            $('#newList').css('opacity', '1');
            $('#nyBox #NewsBox p.more').css('opacity', '1');
        }else{
            $('#nyBox #NewsBox h2').css('opacity', '1');
            $('#newList').css('opacity', '0');
            $('#nyBox #NewsBox p.more').css('opacity', '0');
        }
		if(h4s+scrollH > $('#newList').offset().top){
			$('#nyBox').height('auto');
			$('#nyBox .youtubeBox').addClass('youtubplac');
        }else{
			$('#nyBox').height($('#NewsBox').height()+'px');
			$('#nyBox .youtubeBox').removeClass('youtubplac');
        }
	});
</script>