在前端开发中,经常会遇到需要实现一个区域在滚动时始终保持在屏幕顶部的需求,这个效果通常被称为“吸顶容器”。而实现吸顶容器的方法有很多种,其中比较常见的一种是使用CSS中的position:fixed属
<style> .sticky-container { height: 100px; background-color: #ccc; transform: translateY(-100%); transition: transform 0.3s ease-out; } </style> <br> <div class="wrap"> <div class="sticky-container"> <p>我是要吸顶的内容</p> </div> <p>其他内容</p> <p>其他内容</p> <p>其他内容</p> <p>其他内容</p> ... </div> <br> <script> var stickyContainer = document.querySelector('.sticky-container'); var distanceToTop = stickyContainer.getBoundingClientRect().top; <br> window.addEventListener('scroll', function() { if (window.scrollY >= distanceToTop) { stickyContainer.style.transform = 'translateY(0)'; } else { stickyContainer.style.transform = 'translateY(-100%)'; } }); </script>
粉丝
0
关注
0
收藏
0