Android滑动到顶部悬停

Posted 2023-03-09

参考技术A 无图说卵，先上图

查阅资料后，发现网上大部分都是用这种方法实现的：
多写一个和需要悬浮的部分一模一样的layout，先把浮动区域的可见性设置为gone。当浮动区域滑动到顶部的时候，就把浮动区域B的可见性设置为VISIBLE。这样看起来就像悬浮在顶部不动了。

具体看下边文章 :

高仿美团app，浮动layout滑动到顶部悬停效果

android实例-仿美团app，浮动layout滑动到顶部悬停效果

这里介绍的是另外一种方式：

最终效果：

html 悬停滚动到顶部

https://codepen.io/desirecode/pen/MJPJqV

CSS:
<style>
  
.back-to-top {
    position: fixed;
    right: -2%;
    bottom: 2%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    padding: 5px 15px;
    word-break: break-word;
    display: none;
}

.to_top {
    border-radius: 50%;
    background: #1C3055;
    width: 45px;
    height: 45px;
    line-height: 39px;
    margin: 0 auto;
}

.to_top:hover{ 
    background: #A79951 ;
 }  
  
</style>


HTML:
<!--  Back to top button  -->
<a class="btn btn-sm fade-half back-to-top inner-link" href="#top">
	<div class="to_top">
	  <img src="/wp-content/uploads/2018/11/scrollTriangleUp.png">
	</div>
</a>



<script>
jQuery(document).ready( function() {
  
backToTop() ; 
  
}) ;


	// ########### Back to top ##########
	function backToTop() {
		jQuery( window).scroll(function() {
			if (jQuery(this).scrollTop() > 100) {
				// console.log('window > 200') ;
				jQuery('.back-to-top').fadeIn();
			} else {
				jQuery('.back-to-top').fadeOut();
			}
		});

		jQuery('.to_top').click(function(){ 
			jQuery("html, body").animate({ scrollTop: 0 }, 600); 
			return false; 
		}); 
	}


	// ############ Back to Top Hover ###############
	// used to change icon on hover matching the hover background change
	function backToTopHover() {
		jQuery(".to_top").mouseenter(function(){       
			jQuery('.to_top img').attr('src','/wp-content/uploads/2018/11/triangle_hover.png');      
		});

		jQuery(".to_top").mouseleave(function(){       
			jQuery('.to_top img').attr('src','/wp-content/uploads/2018/11/scrollTriangleUp.png');      
		}); 
	}


</script>