Code đăng bài viết dạng menu thông báo ẩn hiện đầu & cuối trang blogspot
Hôm nay Gia Bảo Blog chia sẻ code tạo Sticky - thông báo có định trên trang đăng bài viết - Sticky được hiển thị nội dung cố định ở vị trí đầu - cuối trang khi xem nội dung trên bài viết blogspot cụ thể :
Code hiển thị khi kéo đến vị trí cụ thể :
<style>
#stickThis {
padding: 5px;
background-color: #ccc;
font-size: 1.5em;
width: 300px;
text-align: center;
font-weight: bold;
border: 2px solid #444;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#stickThis.stick {
margin-top: 0;
position: fixed;
top: 0;
z-index: 9999;
-webkit-border-radius: 0 0 10px 10px;
border-radius: 0 0 10px 10px;
}
</style>
<div id="stick-here"></div>
<div id="stickThis">Sticky note</div>
<script>
function sticktothetop() {
var window_top = $(window).scrollTop();
var top = $('#stick-here').offset().top;
if (window_top > top) {
$('#stickThis').addClass('stick');
$('#stick-here').height($('#stickThis').outerHeight());
} else {
$('#stickThis').removeClass('stick');
$('#stick-here').height(0);
}
}
$(function() {
$(window).scroll(sticktothetop);
sticktothetop();
});
</script>
Code Stiky cố định 4 Vị trí trái phải đầu, cuối trang bài viết Blog Spot :
<!-- Css Float button left, right, top, bottom -->
<style>
.float-contact-phai {
position: fixed;
bottom: 40px;
left: 50%;
z-index: 99999;
}
</style>
<style>
.float-contact {
position: fixed;
top: 25px;
left: 50%;
z-index: 99999;
}
.chat-zalo {
background: #8eb22b;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-face {
background: #125c9e;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.float-contact .hotline {
background: #d11a59!important;
border-radius: 20px;
padding: 0 18px;
color: white;
display: block;
margin-bottom: 6px;
}
.chat-zalo a, .chat-face a, .hotline a {
font-size: 18px;
color: white;
font-weight: 400;
text-transform: none;
line-height: 0;
}
}</style>
<!--
Chen code sau duoi style nếu không cho hiển thị tren dien thoai
@media (max-width: 549px){ .float-contact{ display:none }
-->
<!-- Css Float button left, right, top, bottom -->
<!-- Html Float button left, right, top, bottom -->
<div class='float-contact-phai'>
<!-- Code quảng cáo random -->
Cuối trang
</div>
<div class='float-contact'>
<!-- Code quảng cáo random -->
Đầu Trang
</div>
<!-- End Html Float button left, right, top, bottom -->
Code chèn thanh ngang cố định khi scroll chuột :
<!-- Thanh ngang co dinh khi sroll chuột -->
<style>
nav-codinh {
position: fixed;
z-index: 500;
background: orange;
color: white;
padding: 2px 0;
text-align: center;
width: 100%;
font-size: 18px;
}
</style>
<nav-codinh>Goghepthanh.com</nav-codinh>
<!-- End Thanh ngang co dinh khi sroll chuột -->
