Bài viết này sẽ hướng dẫn bạn cách cố định một phần tử trên trang, có thể là banner quảng cáo, thẻ div...
DEMO: Bạn có thể thấy thành phần bài viết xem nhiều trên trang chủ được cố định khi thanh cuộn trượt qua.
Để làm thủ thuật này rất đơn giản :
1. Đầu tiên bạn cần bạn cần thêm đoạn code này trước </head>
<!-- Cố định Popular Post -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<style type='text/css'>
#floatDivWrapper {font-size:11px}
#floatDiv.fixed {position:fixed;top:45px;bottom:0}
</style>
<script type='text/javascript'>
//<![CDATA[
var s=true;function doBlink(){$('.blink').css('display',function(index,val){s=!s;return (s)?'block':'none';})}
$(document).ready(function() {setInterval("doBlink()",200)});
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){var documentH=$(document).height();if(documentH>1000){
//$("#floatDivWrapper").css('position','fixed');$("#floatDiv").css({'position':'fixed','top':0});
var bottomHeight=1000;var msie6=$.browser=='msie'&&$.browser.version<7;if(!msie6){var top=$('#floatDiv').offset().top-parseFloat($('#floatDiv').css('margin-top').replace(/auto/,0));$(window).scroll(function(event){var y=$(this).scrollTop();if(y>=top&&y<=(documentH-bottomHeight)){$('#floatDiv').addClass('fixed')}else{$('#floatDiv').removeClass('fixed')}})}}});
//]]>
</script>
<!-- Cố định Popular Post -->
2. Bạn muốn cố định một phần tử trang bất kỳ hay quảng cáo. Chỉ cần đặt chúng trong thẻ này:
<div id='floatDiv'> Đặt banner quảng cáo hay phần tử trang của bạn vào đây</div>
OK. Vậy là đã xong. Bạn để ý nếu blog, website bạn đã có jquery.min thì không cần cho thêm đoạn code này nữa nhé:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
Nếu bạn không làm được có thể hỏi mình sẽ giúp đỡ.
Áp dụng : Cố định PopularPost giống của Erhay.
1. Thêm toàn bộ Javascript như ở bước 1.2. Thêm PopularPost sau vào vị trí bạn muốn trong <body>
<div id='floatDiv'>
<div style='height:25px; line-height:25px; padding-left:20px; font-weight:bold; color:#0e1cb3'>
Hot, xem nhiều <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQJRSagvBCswSM0J4PyLm6l6D-v8S5vw-pcdaEZ3_POIsvxHZtd3C2k-LDr1SJVmXG4zQQXTm7avmeX5PyKzsCDg71VGau50stt8Gvd22Hmt5VbqxUl9XneKpN3Tuyn7xJp-BfnUeUyiM/s35/icon-hot.gif'/>
</div>
<div class='most-view'>
<b:section class='sidebar1' id='sidebartab19' preferred='yes'>
<b:widget id='PopularPosts2' locked='false' title='Xem nhiều trong tuần' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'>
<data:post.title/>
</a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'>
<a expr:href='data:post.href'>
<data:post.title/>
</a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'>
<data:post.title/>
</a>
</div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'>
<a expr:href='data:post.href'>
<data:post.title/>
</a>
</div>
<div class='item-snippet'>
<data:post.snippet/>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>
</div>
hoạt động ok ý bác.
ReplyDeleteNhưng mà có 1 chút lỗi nè. như ở eus.vn khi kéo xuống gần đến footer nó biết mất luôn.
Nếu mà kéo nó k mất và khi đến footer nó dừng lại và k che footer thì hay quá.
bác coi cái http://newscn.vn ý
ReplyDeletenó đầy đủ ý trang chính thì là http://www.newscn.vn
trang chi tiết bài viết http://www.newscn.vn/2013/03/van-mai-huong-huong-tram-hoi-tu-tai.html
trang từng label http://www.newscn.vn/search/label/tin%20t%E1%BB%A9c
trang mới http://www.newscn.vn/p/lien-he.html
trang có giao diện ở dạng mobi http://www.newscn.vn/?m=1
bác coi cái http://newscn.vn ý
ReplyDeletenó đầy đủ ý trang chính thì là http://www.newscn.vn
trang chi tiết bài viết http://www.newscn.vn/2013/03/van-mai-huong-huong-tram-hoi-tu-tai.html
trang từng label http://www.newscn.vn/search/label/tin%20t%E1%BB%A9c
trang mới http://www.newscn.vn/p/lien-he.html
trang có giao diện ở dạng mobi http://www.newscn.vn/?m=1
mấy cái giao diện trên Web thì làm không khó. Duy có cái giao diện mobi thì chưa đụng qua :D. Vừa lấy được cái Layout trang đó rồi, nhưng mai off chắc ko xong được, bác chờ thêm tí nữa. Vừa mới làm cái menu kiểu như trang đó :D http://www.erhay.com/2013/03/tao-menu-giong-vnexpress.html
ReplyDeletetks bác
ReplyDeletemenu kiểu đó cũng đc đó nhưng nếu chế đc giống như http://www.webtretho.com/ cũng hay bác tham khảm thêm cái http://www.webtretho.com/ đi
mình không làm được,giup mình với,
ReplyDelete@Gió : Đã cập hướng dẫn ví dụ cho bạn
ReplyDeletewebsite wordpress có làm được không vậy bạn ơi.
ReplyDeleteTất nhiên là đc rồi bạn :)
DeleteHelp me! Mình không làm được, bạn có thể gửi trang demo cho mình không?
ReplyDelete