大家好我坚持一个问题。我搜索了很多,但没有找到具体的解决方案。
情景是
我有一个很长的滚动内容,每个标题下都有不同的(动态)标题和动态内容。这将垂直滚动。
我需要将标题保留在每个标题中的滚动内容的顶部。当第一个内容移到顶部时,标题将更改为下一个内容,依此类推。
请帮我这样做。谢谢大家
代码如下
喀拉拉邦学校Kalolsavam 2013 2014
http://code.jquery.com/jquery-1.6.3.js'>
.marqueeElement {
身高:1px;
宽度:780px;
颜色:#ccc;
border:1px solid#666;
位置:相对;
}
#mholder {
身高:700px;
宽度:780px;
边框:实心1px黑色;
位置:相对;
溢出:隐藏;
}
//
function doScroll($ele) {
var top = parseInt($ele.css("top"));
if (top < -160) { //bit arbitrary!
var $lastEle = $(".last");
$lastEle.removeClass("last");
$ele.addClass("last");
var top = (parseInt($lastEle.css("top")) + $lastEle.height());
$ele.css("top", top);
}
$ele.animate({top: (parseInt(top) - 75)}, 2000, 'linear', function() {
doScroll($(this))
});
}
});//]]>
</script>
<div class="content">
<hr>
<div class="container_12">
<div class="grid_8">
<iframe width="420" height="420" src="//www.youtube.com/embed/7YQRTVEX8z4?autoplay=1&hl=en_US&version=3&rel=0" frameborder="1" allowfullscreen>
</iframe>
<div align="right"><a href="#" class="btn" style="height:245px"> Candidates are requested to report before 2 hours to start program </a> </div>
<span id="responsiveFlag"></span>
</div>
<div id="mholder">
<div class="marqueeElement">
<div class="grid_4">
<div id="stage">
<a href="#" class="donate">വേദി 14 : വൈഖരി</a>
</div>
<div id="items">
<table border="1" width="100%">
<tr>
<td><span class="text1">നടന്നുകൊണ്ടിരിക്കുന്ന മത്സരം</span> </td>
<td> </td>
<td><span class="text1">Sambhashanam [717][HS Arabic]</span></td>
</tr>
<tr>
<td><span class="text1">ആകെ മത്സരാര്ഥികള്</span> </td>
<td> </td>
<td><span class="text1">15</span></td>
</tr>
<tr>
<td><span class="text1">മത്സരം പൂര്ത്തിയാക്കിയവര്</span> </td>
<td> </td>
<td><span class="text1">5</span></td>
</tr>
<tr>
<td><span class="text1">ഇപ്പോഴത്തെ Cluster</span> </td>
<td> </td>
<td><span class="text1">1</span></td>
</tr>
<tr>
<td><span class="text1">വേദിയില് ഇപ്പോള് മത്സരിക്കുന്ന ചെസ് നമ്പര്</span> </td>
<td> </td>
<td><span class="text1">112</span></td>
</tr>
<tr>
<td><span class="text1">തുടങ്ങിയ സമയം</span> </td>
<td> </td>
<td><span class="text1">14:09:PM</span></td>
</tr>
<tr>
<td><span class="text1">അവസാനിക്കുന്ന സമയം</span> </td>
<td> </td>
<td><span class="text1">02:14:PM</span></td>
</tr>
<tr>
<td><span class="text1">ഇനി മത്സരിക്കാനുള്ളവരുടെ ചെസ് നമ്പറുകള് </span> </td>
<td> </td>
<td><span class="text1">ഏകദേശ സമയം</span> </td>
</tr>
<tr>
<td><span class="text1">122</span> </td>
<td> </td>
<td><span class="text1">02:19:PM</span></td>
</tr>
<tr>
<td><span class="text1">123</span> </td>
<td> </td>
<td><span class="text1">02:24:PM</span></td>
</tr>
<tr>
<td><span class="text1">124</span> </td>
<td> </td>
<td><span class="text1">02:29:PM</span></td>
</tr>
<tr>
<td><span class="text1">125</span> </td>
<td> </td>
<td><span class="text1">02:34:PM</span></td>
</tr>
<tr>
<td><span class="text1">126</span> </td>
<td> </td>
<td><span class="text1">02:39:PM</span></td>
</tr>
</table>
<div class="grid_3">
<div class="block2 maxheight">
<div class="title">മത്സരം അവസാനിക്കാനുള്ള ഏകദേശ സമയം</div>
<div class="pad">
<h1>02:59:PM</h1>
</div>
</div>
</div>
<div class="grid_3">
<div class="block2 maxheight">
<div class="title">അടുത്തതായി നടക്കേണ്ട മത്സരം<br><br></div>
<div class="pad">
<h1>Sambhashanam</h1>
</div>
</div>
</div>
</div>
</div>
<div class="grid_4">
<div id="stage">
<a href="#" class="donate">വേദി 15 : വര്ണം</a>
</div>
<div id="items">
<table border="1" width="100%">
<tr>
<td><span class="text1">നടന്നുകൊണ്ടിരിക്കുന്ന മത്സരം</span> </td>
<td> </td>
<td><span class="text1">Aksharaslokam [805][HS Sanskrit]</span></td>
</tr>
<tr>
<td><span class="text1">ആകെ മത്സരാര്ഥികള്</span> </td>
<td> </td>
<td><span class="text1">13</span></td>
</tr>
<tr>
<td><span class="text1">മത്സരം പൂര്ത്തിയാക്കിയവര്</span> </td>
<td> </td>
<td><span class="text1">10</span></td>
</tr>
<tr>
<td><span class="text1">ഇപ്പോഴത്തെ Cluster</span> </td>
<td> </td>
<td><span class="text1">1</span></td>
</tr>
<tr>
<td><span class="text1">വേദിയില് ഇപ്പോള് മത്സരിക്കുന്ന ചെസ് നമ്പര്</span> </td>
<td> </td>
<td><span class="text1">568</span></td>
</tr>
<tr>
<td><span class="text1">തുടങ്ങിയ സമയം</span> </td>
<td> </td>
<td><span class="text1">04:53:PM</span></td>
</tr>
<tr>
<td><span class="text1">അവസാനിക്കുന്ന സമയം</span> </td>
<td> </td>
<td><span class="text1">04:53:PM</span></td>
</tr>
<tr>
<td><span class="text1">ഇനി മത്സരിക്കാനുള്ളവരുടെ ചെസ് നമ്പറുകള് </span> </td>
<td> </td>
<td><span class="text1">ഏകദേശ സമയം</span> </td>
</tr>
<tr>
<td><span class="text1">312</span> </td>
<td> </td>
<td><span class="text1">04:53:PM</span></td>
</tr>
<tr>
<td><span class="text1">23</span> </td>
<td> </td>
<td><span class="text1">04:53:PM</span></td>
</tr>
<tr>
<td><span class="text1">123</span> </td>
<td> </td>
<td><span class="text1">04:53:PM</span></td>
</tr>
<tr>
<td><span class="text1">32</span> </td>
<td> </td>
<td><span class="text1">04:53:PM</span></td>
</tr>
<tr>
<td><span class="text1">434</span> </td>
<td> </td>
<td><span class="text1">04:53:PM</span></td>
</tr>
</table>
<div class="grid_3">
<div class="block2 maxheight">
<div class="title">മത്സരം അവസാനിക്കാനുള്ള ഏകദേശ സമയം</div>
<div class="pad">
<h1>04:53:PM</h1>
</div>
</div>
</div>
<div class="grid_3">
<div class="block2 maxheight">
<div class="title">അടുത്തതായി നടക്കേണ്ട മത്സരം<br><br></div>
<div class="pad">
<h1>Aksharaslokam</h1>
</div>
</div>
</div>
</div>
</div>
<div class="grid_4">
<div id="stage">
<a href="#" class="donate">വേദി 1 : മഴവില്ല്</a>
</div>
<div id="items">
<table border="1" width="100%">
<tr>
<td><span class="text1">നടന്നുകൊണ്ടിരിക്കുന്ന മത്സരം</span> </td>
<td> </td>
<td><span class="text1">Sangha Nrutham (Girls) [672][HS General]</span></td>
</tr>
<tr>
<td><span class="text1">ആകെ മത്സരാര്ഥികള്</span> </td>
<td> </td>
<td><span class="text1">29</span></td>
</tr>
<tr>
<td><span class="text1">മത്സരം പൂര്ത്തിയാക്കിയവര്</span> </td>
<td> </td>
<td><span class="text1">5</span></td>
</tr>
<tr>
<td><span class="text1">ഇപ്പോഴത്തെ Cluster</span> </td>
<td> </td>
<td><span class="text1">1</span></td>
</tr>
<tr>
<td><span class="text1">വേദിയില് ഇപ്പോള് മത്സരിക്കുന്ന ചെസ് നമ്പര്</span> </td>
<td> </td>
<td><span class="text1">315</span></td>
</tr>
<tr>
<td><span class="text1">തുടങ്ങിയ സമയം</span> </td>
<td> </td>
<td><span class="text1">12:57:PM</span></td>
</tr>
<tr>
<td><span class="text1">അവസാനിക്കുന്ന സമയം</span> </td>
<td> </td>
<td><span class="text1">01:07:PM</span></td>
</tr>
<tr>
<td><span class="text1">ഇനി മത്സരിക്കാനുള്ളവരുടെ ചെസ് നമ്പറുകള് </span> </td>
<td> </td>
<td><span class="text1">ഏകദേശ സമയം</span> </td>
</tr>
<tr>
<td><span class="text1">122</span> </td>
<td> </td>
<td><span class="text1">01:17:PM</span></td>
</tr>
<tr>
<td><span class="text1">123</span> </td>
<td> </td>
<td><span class="text1">01:27:PM</span></td>
</tr>
<tr>
<td><span class="text1">124</span> </td>
<td> </td>
<td><span class="text1">01:37:PM</span></td>
</tr>
<tr>
<td><span class="text1">125</span> </td>
<td> </td>
<td><span class="text1">01:47:PM</span></td>
</tr>
<tr>
<td><span class="text1">126</span> </td>
<td> </td>
<td><span class="text1">01:57:PM</span></td>
</tr>
</table>
<div class="grid_3">
<div class="block2 maxheight">
<div class="title">മത്സരം അവസാനിക്കാനുള്ള ഏകദേശ സമയം</div>
<div class="pad">
<h1>04:57:PM</h1>
</div>
</div>
</div>
<div class="grid_3">
<div class="block2 maxheight">
<div class="title">അടുത്തതായി നടക്കേണ്ട മത്സരം<br><br></div>
<div class="pad">
<h1>Sangha Nrutham (Girls)</h1>
</div>
</div>
</div>
</div>
</div>
<div class="grid_4">
<div id="stage">
<a href="#" class="donate">വേദി 12 : ഗസല്</a>
</div>
<div id="items">
<table border="1" width="100%">
<tr>
<td><span class="text1">നടന്നുകൊണ്ടിരിക്കുന്ന മത്സരം</span> </td>
<td> </td>
<td><span class="text1">Thabala [620][HS General]</span></td>
</tr>
<tr>
<td><span class="text1">ആകെ മത്സരാര്ഥികള്</span> </td>
<td> </td>
<td><span class="text1">16</span></td>
</tr>
<tr>
<td><span class="text1">മത്സരം പൂര്ത്തിയാക്കിയവര്</span> </td>
<td> </td>
<td><span class="text1">10</span></td>
</tr>
<tr>
<td><span class="text1">ഇപ്പോഴത്തെ Cluster</span> </td>
<td> </td>
<td><span class="text1">1</span></td>
</tr>
<tr>
<td><span class="text1">വേദിയില് ഇപ്പോള് മത്സരിക്കുന്ന ചെസ് നമ്പര്</span> </td>
<td> </td>
<td><span class="text1">565</span></td>
</tr>
<tr>
<td><span class="text1">തുടങ്ങിയ സമയം</span> </td>
<td> </td>
<td><span class="text1">16:51:PM</span></td>
</tr>
<tr>
<td><span class="text1">അവസാനിക്കുന്ന സമയം</span> </td>
<td> </td>
<td><span class="text1">05:01:PM</span></td>
</tr>
<tr>
<td><span class="text1">ഇനി മത്സരിക്കാനുള്ളവരുടെ ചെസ് നമ്പറുകള് </span> </td>
<td> </td>
<td><span class="text1">ഏകദേശ സമയം</span> </td>
</tr>
<tr>
<td><span class="text1">2323</span> </td>
<td> </td>
<td><span class="text1">05:11:PM</span></td>
</tr>
<tr>
<td><span class="text1">32434</span> </td>
<td> </td>
<td><span class="text1">05:21:PM</span></td>
</tr>
<tr>
<td><span class="text1">32423</span> </td>
<td> </td>
<td><span class="text1">05:31:PM</span></td>
</tr>
<tr>
<td><span class="text1">344</span> </td>
<td> </td>
<td><span class="text1">05:41:PM</span></td>
</tr>
</table>
<div class="grid_3">
<div class="block2 maxheight">
<div class="title">മത്സരം അവസാനിക്കാനുള്ള ഏകദേശ സമയം</div>
<div class="pad">
<h1>05:51:PM</h1>
</div>
</div>
</div>
<div class="grid_3">
<div class="block2 maxheight">
<div class="title">അടുത്തതായി നടക്കേണ്ട മത്സരം<br><br></div>
<div class="pad">
<h1>Thabala</h1>
</div>
</div>
</div>
</div>
</div>
<div class="grid_4">
<div id="stage">
<a href="#" class="donate">വേദി 10 : തരംഗിണി</a>
</div>
<div id="items">
<table border="1" width="100%">
<tr>
<td><span class="text1">നടന്നുകൊണ്ടിരിക്കുന്ന മത്സരം</span> </td>
<td> </td>
<td><span class="text1">Chithra Rachana - Pencil [601][HS General]</span></td>
</tr>
<tr>
<td><span class="text1">ആകെ മത്സരാര്ഥികള്</span> </td>
<td> </td>
<td><span class="text1">16</span></td>
</tr>
<tr>
<td><span class="text1">മത്സരം പൂര്ത്തിയാക്കിയവര്</span> </td>
<td> </td>
<td><span class="text1">15</span></td>
</tr>
<tr>
<td><span class="text1">ഇപ്പോഴത്തെ Cluster</span> </td>
<td> </td>
<td><span class="text1">1</span></td>
</tr>
<tr>
<td><span class="text1">വേദിയില് ഇപ്പോള് മത്സരിക്കുന്ന ചെസ് നമ്പര്</span> </td>
<td> </td>
<td><span class="text1">212</span></td>
</tr>
<tr>
<td><span class="text1">തുടങ്ങിയ സമയം</span> </td>
<td> </td>
<td><span class="text1">16:50:PM</span></td>
</tr>
<tr>
<td><span class="text1">അവസാനിക്കുന്ന സമയം</span> </td>
<td> </td>
<td><span class="text1">06:50:PM</span></td>
</tr>
<tr>
<td><span class="text1">ഇനി മത്സരിക്കാനുള്ളവരുടെ ചെസ് നമ്പറുകള് </span> </td>
<td> </td>
<td><span class="text1">ഏകദേശ സമയം</span> </td>
</tr>
<tr>
<td><span class="text1">123</span> </td>
<td> </td>
<td><span class="text1">08:50:PM</span></td>
</tr>
<tr>
<td><span class="text1">2</span> </td>
<td> </td>
<td><span class="text1">10:50:PM</span></td>
</tr>
<tr>
<td><span class="text1">312</span> </td>
<td> </td>
<td><span class="text1">12:50:AM</span></td>
</tr>
<tr>
<td><span class="text1">321</span> </td>
<td> </td>
<td><span class="text1">02:50:AM</span></td>
</tr>
<tr>
<td><span class="text1">321</span> </td>
<td> </td>
<td><span class="text1">04:50:AM</span></td>
</tr>
<tr>
<td><span class="text1">31</span> </td>
<td> </td>
<td><span class="text1">06:50:AM</span></td>
</tr>
<tr>
<td><span class="text1">312</span> </td>
<td> </td>
<td><span class="text1">08:50:AM</span></td>
</tr>
</table>
<div class="grid_3">
<div class="block2 maxheight">
<div class="title">മത്സരം അവസാനിക്കാനുള്ള ഏകദേശ സമയം</div>
<div class="pad">
<h1>06:50:PM</h1>
</div>
</div>
</div>
<div class="grid_3">
<div class="block2 maxheight">
<div class="title">അടുത്തതായി നടക്കേണ്ട മത്സരം<br><br></div>
<div class="pad">
<h1>Chithra Rachana - Pencil</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<a href="programeStatus1.php">View without scrolling</a>
</div>