sticky logo only

Hi Long,

It's certainly possible but you'll need custom script for it to work.

Here's an example CSS + JS combo you can try.

<script>
const siteLogo = document.querySelector('.site-logo');

var lastScrollTop = 0;

document.addEventListener("scroll", function(){ // or window.addEventListener("scroll"....
		var st = window.pageYOffset || document.documentElement.scrollTop; // Credits: "https://github.com/qeremy/so/blob/master/so.dom.js#L426"
		if (st > lastScrollTop){
			siteLogo.classList.add('sticky-mode');
		} else if(st === 0 || isInViewport(siteLogo.parentNode)) { 
			console.log("Top of page");
			siteLogo.classList.remove('sticky-mode');
		} else {
			console.log("scrolling up "+st);
		}
	
		lastScrollTop = st <= 0 ? 0 : st; // For Mobile or negative scrolling
}, false);
	
	
	var isInViewport = function (elem) {
    var bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};
</script>

<style>
.sticky-mode {
    z-index: 9999;
    position: fixed;
	top: 20px;
	width: auto;
}
</style>

You can hook this on your wp_footer.