Làm thanh menu ở chân trang

Nếu bạn muốn làm thanh menu ở chân trang, bài viết này sẽ giúp bạn.

Bài viết sử dụng Font Awesome để hiển thị các biểu tượng. Demo xem ngay tại bài viết này nhé, menu sẽ hiển thị khi bạn kéo lên một đoạn.

HTML

Các bạn có thể tự tùy chỉnh thêm chữ để cho rõ ràng hơn nhé.

<div class="footer-tools-bar text-center hidden">
    <div class="container">
        <div class="auto-scroll-container">
            <span class="fas fa-bars"></span>
            <span class="divide-bar"></span>
            <a href="https://inithtml.com/">
                <span class="fas fa-home"></span>
            </a>
            <span class="divide-bar"></span>
            <a href="#">
                <span class="fas fa-level-up-alt"></span>
            </a>
            <span class="divide-bar"></span>
            <a class="m-r-7" href="#">
                <span class="fas fa-arrow-left"></span>
            </a> / <a href="#">
                <span class="fas fa-arrow-right"></span>
            </a>
            <span class="divide-bar"></span>
            <span class="fas fa-moon" title="Chuyển sang sáng/tối"></span>
            <span class="divide-bar"></span>
            <a href="#comments">
                <span class="fas fa-comment"></span>
            </a>
            <span class="divide-bar"></span>
            <span class="timer">120</span>
            <span class="divide-bar hidden-xs"></span>
            <span class="fas fa-chevron-up back-to-top hidden-xs" title="Trở lên trên"></span>
        </div>
    </div>
</div>

CSS

CSS đơn giản như sau.

.footer-tools-bar {
    background: #eee;
    box-shadow: 0 0 11px 1px rgba(0, 0, 0, 0.15);
    position: fixed;
    bottom: 0;
    width: 100%;
    line-height: 45px;
    height: 45px;
    z-index: 998;
}

.auto-scroll-container {
    font-size: 18px;
    transition: all 0.2s ease;
    height: 45px;
}

.auto-scroll-container:hover,
.auto-scroll-container:focus {
    opacity: 1;
}

.auto-scroll-container span {
    cursor: pointer;
    transition: all 0.2s ease;
}

.auto-scroll-container span.m-r-7 {
    margin-right: 7px;
}

.auto-scroll-container span:hover,
.auto-scroll-container span.active {
    color: #1463f3;
}

.divide-bar {
    border-left: 1px solid #ccc;
    margin-right: 15px;
    margin-left: 15px;
}

.auto-scroll-container .timer {
    display: inline-block;
    width: 25px;
    text-align: center;
}

jQuery

Demo này sử dụng jQuery 3.7.1.

<script type="text/javascript">
	jQuery(document).ready(function($) {
		var lastScrollTop = 0;
		$(window).on("scroll", function() {
	        var currScrollTop = $(this).scrollTop();
	        if (currScrollTop == 0 || currScrollTop > lastScrollTop) {
	            if (!$('.footer-tools-bar').hasClass('hidden')) {
	                $('.footer-tools-bar').addClass('hidden');
	                if ($('.sticky-footer').length > 0) {
	                    $('.sticky-footer').css('bottom', '0');
	                }
	            }
	        } else if (currScrollTop < (lastScrollTop - 10)) {
	            if ($('.footer-tools-bar').hasClass('hidden')) {
	                $('.footer-tools-bar').removeClass('hidden');
	                if ($('.sticky-footer').length > 0) {
	                    $('.sticky-footer').css('bottom', '45px');
	                }
	            }
	        }

	        lastScrollTop = currScrollTop;
	    });
	});
</script>

Tham khảo thêm: