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 --> 
 

Hiển thị nội dung Cuối trang

Hiển thị nội dung cố định Đầu Trang