问答博客标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
php
java
vue.js
git
html5
python
node.js
android
mysql
react.js
linux
ios
css
golang
spring
docker
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

CSS 如何实现在滚动条向下滑动时某个区域始终在顶部显示？

头像
寅春树
    1.3k11206460
    头像头饰
    fenbox
    6.8k217979

    怎么滚动条向下滑到top位置时让它一直在顶部显示？
    image.png

    css
    阅读 3k
    5 个回答
    得票最新
    头像
    刘伦伦
      4
      新手上路，请多包涵

      有两个方案：

      1. 让top与下面的表单分离，固定表单容器高度，让滚动条只出现在表单容器上
      2. 使用position:sticky
      头像头饰
      易承粥
        322

        1.可以设置两个单独的块级元素，上面固定高度，下面自由滚动
        2.用position:sticky固定到头部位置,整体页面向下滚动的时候上方保持不变

        头像
        威哥爱编程
          183177
          头像头饰
          陟上晴明
            21.1k124691

            在CSS中，要实现在滚动条向下滑动时某个区域始终在顶部显示的效果，通常使用position: fixed;属性。这个属性可以创建一个固定定位的元素，使其在页面滚动时保持在相同的屏幕位置。以下是实现这个效果的基本步骤：

            选择你想要在滚动时保持在顶部的元素，并为其设置一个id或class。
使用CSS选择器定位该元素，并设置position: fixed;。
根据需要，设置top、left、right或bottom属性来调整元素的位置。
可选地，可以设置z-index属性来确保元素在页面上其他元素的上方显示。

            下面是一个简单的示例：

            <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Header Example</title>
<style>
  /* 设置页面的默认滚动行为 */
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }

  /* 定义一个类，用于在滚动时固定元素 */
  .fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #f8f8f8;
    padding: 10px 0;
    z-index: 1000; /* 确保这个元素在其他元素之上 */
  }

  /* 为了演示，添加一些内容和高度 */
  .content {
    padding: 50px;
    background: #fff;
    min-height: 1000px; /* 确保页面足够长，可以滚动 */
  }
</style>
</head>
<body>

<div id="header" class="fixed">
  <h1>始终在顶部显示的区域</h1>
</div>

<div class="content">
  <p>滚动页面查看效果。</p>
  <!-- 其他内容 -->
</div>

</body>
</html>

            在这个例子中，#header元素在页面滚动时会保持在顶部，因为其position属性被设置为fixed，并且top属性被设置为0。这样，无论页面如何滚动，这个元素都会保持在屏幕的顶部。

            请注意，使用position: fixed;时，元素会从文档流中被移除，不再占据原来的空间，这可能会导致页面内容的重新布局。因此，可能需要对其他元素的布局进行一些调整，以避免出现意外的效果。

            头像
            ezmo
              7.3k2633

              第一种，使用纯css实现 position:sticky

              如果你的用户不会使用IE，那么最方便的方式就是使用 postion:sticky , 在MDN官网上可以看演示效果

              这个属性的兼容性情况
              image.png

              使用这个sicky有个坑要避免，被定义为sticky的dom必须有它的兄弟节点，否则不能正常工作。

              <!-- DOESN'T WORK!!! -->
<style>
    .sticky{
        position: sticky;
        top: 0;
    }
</style>
<div class="wrapper">
   <div class="sticky">
        SOME CONTENT
   </div>
</div>

              第二种，使用JS实现

              想最大程度的兼容，那么就使用JS实现，基本原理

              1. 初始状态记住 Menu的偏移量
              2. 在onscroll事件中，检测当前页面偏移量是否到达了第一步记录的偏移量，如果达到了，让Menu元素变为 position:fixed元素。

              示例代码：
              html

              <div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

              css

              /* Style the navbar */
#navbar {
  overflow: hidden;
  background-color: #333;
}

/* Navbar links */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

/* Page content */
.content {
  padding: 16px;
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

              Javascript

              // When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};

// Get the navbar
var navbar = document.getElementById("navbar");

// Get the offset position of the navbar
var sticky = navbar.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
              头像
              HUMILITY
                744

                别用js哈，这个css就实现了，
                你想吸顶的那个 div，
                相对父元素 position: sticky;就行，
                具体的可以细调

                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题
                宣传栏