<link rel="stylesheet" href="mui/css/mui.min.css">

<div id="music_tab">
	<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
		<a class="mui-control-item mui-active" href="#item-music-chinese">中文</a>
		<a class="mui-control-item" href="#item-music-english">英文</a>
	</div>
</div>
<div>
	<div id="item-music-chinese" class="mui-control-content mui-active">
		111
	</div>
	<div id="item-music-english" class="mui-control-content">
		222
	</div>
</div>
 

<div id="item-music-chinese" class="mui-control-content mui-active">
	<ul class="mui-table-view" id="musicChinese">
		<li class="mui-table-view-cell mui-media" >
			<div >
				<img class="mui-media-object mui-pull-left" src="music.jpg">
				<div class="mui-media-body">
					<span v-text="song.musicTitle">沙龍課卡蘭蒂斯</span>
					<p class="mui-ellipsis" >asfsddsaf rfcqaew aszde   qwertyuiiuytewqqww</p>
				</div>
			</div>
		</li>
	</ul>
</div>
 

滾動一定距離 元件置頂

function scrollListen() {
	//導航div離頂部的距離
	var tab = document.getElementById('music_tab');
	var nav_menu_toTop = tab.offsetTop;
	var isFixed = false;
	//頁面滑動事件
	window.addEventListener('scroll', function (e) {

		var h = this.scrollY //獲得滾動條距top的高度
		var nav_menu_toTopOffsetHead = nav_menu_toTop - 44;
		if (h - nav_menu_toTopOffsetHead > 0) {
			tab.style.cssText = 'position: fixed; top: 44px; z-index: 999;  width:100%; background-color: white; border-top: 1px solid #ccc';
			isFixed = true;
		}

		if (isFixed) {
			if (h < 44) {
				tab.style.cssText = 'position: static; border-top: 0px; top: ' + nav_menu_toTop;
				isFixed = false;
			}
		}
	});
}

window.addEventListener("load", function (event) {
	scrollListen();
});