3 Bước Tạo mục lục bài viết ẩn và hiện cho blogspot-blogger

3 Bước Tạo mục lục bài viết ẩn và hiện cho blogspot-blogger

position:fixed;
right:0;
top:200px;
z-index:9999;
width:300px;
display:none;
text-align:right;
}

a.dropdown-list_button {
text-align:center;
text-decoration:none;
}

a.dropdown-list_button:hover {
text-decoration:none !important;
}

a.dropdown-list_button:before {
content:"\f03a";
font-family:fontawesome;
background:#fff;
color:#424242;
font-size:20px;
width:35px;
height:35px;
display:inline-block;
line-height:38px;
text-align:center;
border:1px solid #ddd;
}

.dropdown-list_menu {
display:none;
margin:0 !important;
padding:10px !important;
background:rgb(255,255,255);
border:1px solid #ddd;
text-align: left;
}

@media all and (max-width:600px) {
#dropdown-list {
display:none !important;
}
}
</style>
</b:if>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'type='text/javascript'/>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>
//<![CDATA[
// Hiện mục lục khi click vào button
var pcbcontainer = $(".dropdown-list_menu"),
pcbbutton = $(".dropdown-list_button");
$(function() {
pcbbutton.click(function() {
if (pcbcontainer.is(":hidden")) {
pcbcontainer.slideDown(200);
} else {
pcbcontainer.fadeOut(200);
}
});
});
$(document).mouseup(function(e) {
if (!pcbcontainer.is(e.target) && pcbcontainer.has(e.target).length === 0) {
pcbcontainer.fadeOut(200);
}
});
// Kéo xuống 1000px sẽ hiện button show mục lục
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 1000) { // Thay 1000 bằng khoảng cách tính từ trên xuống, đơn vị pixel
$('#dropdown-list').fadeIn();
} else {
$('#dropdown-list').fadeOut();
}
});
//]]>
</script>
</b:if>

thay 1000 thành số bạn muốn hiện mục lục khi cuộn xuống theo đơn vị pixel

<div id="dropdown-list">
<a class="dropdown-list_button" href="javascript:;"></a>
<ul class="dropdown-list_menu">
<li><a href="#m1">Mục 1</a>
</li>
<li><a href="#m2">Mục 2</a>
</li>
<li><a href="#m3">Mục 3</a>
</li>
<li><a href="#m4">Mục 4</a>
</li>
</ul>
</div>