CSS/JS 实现滑动页面,到一定位置,position 定位设置为fixed,否则用absolute;

本文介绍如何使用JavaScript和CSS实现顶部导航栏在滚动到特定位置时固定显示的效果,包括具体实现步骤及代码示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

这里写图片描述

当我滚动页面的时候,在可视区域的时候,我想让顶部的导航区域随着我页面的滚动一起滚动,但是当页面移动到一定位置的时候,如果还是使用postion:alsolute;来进行定位的话,顶部导航就回随着我页面的移动而移动。不会将导航下面的内容移动后,就自动以position:fixed的样子来显示顶部导航区域。


下面我放一张京东的导航图的效果,更直观的显示,我想要实现的大致操作。

注意顶部京东搜索的那个框:

这里写图片描述


想要实现的程序部分如下所示:

HTML部分:

<div id="district_navigation_switch">
  <div id="district_menu" class="white_box">
    <div class="district_select">上海</div>
    <label href="javascript:void(0);" class="click_district" onclick="$('.district_tips').show();">择校</label>    
  </div>
</div>

CSS部分:

 #district_menu {
   box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
   height: 50px;
   line-height: 50px;
   font-size: 16px;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1000;
   text-align: center;
   .district_select {
     background: image-url('arrow-up.png') no-repeat center right;
     background-size: 7px;
     background-position: 55px 17px;
     width: 70px;
     position: absolute;
     left: 0;
    font-size: 15px;
  }
  label {
    display: block;
  }
}

JS部分:

$(function() {
  $(window).scroll(function() {
  //获取垂直滚动的距离
    var scrollTop = $(document).scrollTop();
    if (scrollTop >= 50) {
      $("#district_navigation_switch").css({"top":"0","position":"fixed"});
    }else {
    $("#district_navigation_switch").css({"top":"inherit","position":"absolute"});
      } 
    });
  });

注意:

1.scrollTop >= 50这段功能的主要部分就是这串JS,虽然不是很难读,但是分析的过程却是很重要的,顶部的#district_navigation_switch这个区域我是写死的高度,所以我结下来的操作就是针对这写死的高度进行实验,无非就是当顶部的导航栏检测到超出顶部的50高度时,自动的将定位的属性自动进行更改。
如果你不是写死的高度,你就需要用到自动判断滚动区域的大小距离顶部的距离,怎么计算高度呢,就需要通过scrollHeight这种操作来计算高度值了。也可以参考我之前写过的一篇文章触摸屏幕,滚动页面内容到底部,上拉刷新显示数据,文章的底部,我放了一张屏幕的计算图,很直观易懂。


比起复杂的操作,这只是一个小例子。希望可以给你提供些灵感,如果能够帮助到你,那就是这篇文章存在的意义 ~


【更新】:更新一个功能(tabMenu 滑动到顶部固定,fixed 在顶部):
这里写图片描述

 $(function() {
   $(window).scroll(function() {
     //获取 id="course_container" 元素,offsetTop是当前元素·距离网页窗口顶部的距离
     var offset_top = document.getElementById("course_container").offsetTop
     // console.log("tab距离顶部的距离:" + offset_top)

     //获取垂直滚动的距离(scrollTop()是从顶部开始滚动产生的距离)
     var scroll_top = $(document).scrollTop();
     // console.log("滚动的距离:" + scroll_top)

     if (scroll_top > offset_top) {
       console.log("fixed success")
       // 到达顶部位置,动态的添加元素属性,并给元素添加相应的元素样式
       document.getElementById("switch_tab").classList.add("switch_title_fixed");  
     } else {
       // 同理,把之前添加的元素移除即可
       document.getElementById("switch_tab").classList.remove("switch_title_fixed");  
     }
   });
 });
// tabMenu的html的结构
<div id="course_container"></div>
<ul className="switchTitle" id="switch_tab">
  <li className={this.state.activeSwitch1} onClick={this.onClickCourse}>课程介绍</li>
  <li className={this.state.activeSwitch2} onClick={this.onClickProblem}>常见问题</li>
  <li className={this.state.activeSwitch3} onClick={this.onClickEvalute}>用户评价</li>
</ul>
// tabMenu的scss的样式表
.switchTitle {
  background-color: #fff;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-top: -7px;
  box-shadow: 0 1px 2px rgba(122, 36, 36, 0.1);
  color:#666666;
  .active {
    border-bottom: 2px solid #333333;
    color: #333333;
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
}

// 到固定位置 固定 switchTitle tab
.switch_title_fixed {
  animation: searchTop .5s ease-in-out;
  position: fixed;
  margin-top: 0;
  z-index: 100;
  top: 0;
  box-shadow: 0px 2px 1px rgba(0,0,0,.2);
}

· 这个功能应该用到的人比较多,所以整理出来。方便需要的coder参考。
· 再补充一点。在React中,虽然不赞成用户通过操作dom来实现功能。但是,在React中,在不操作DOM的情况下实现固定顶部fixed的功能是比较复杂的。获取顶部和滚动距离这个功能,建议通过操作DOM实现。

### CSS `position` 属性使用指南 #### 一、CSS 定位概述 CSS 中的 `position` 属性用于定义元素框相对于其正常位置或其他容器的位置。通过设置不同的定位类型,可以精确控制 HTML 元素在页面中的布局[^1]。 --- #### 二、定位类型的详细说明 ##### 1. **Static(默认定位)** 这是所有 HTML 元素的默认定位方式。在这种模式下,元素按照正常的文档流进行排列,不受 `top`, `bottom`, `left`, 和 `right` 属性的影响[^3]。 ```css /* 默认定位 */ .element { position: static; } ``` ##### 2. **Relative(相对定位)** 相对定位使元素相对于其原始位置偏移,而不会影响其他元素的布局。尽管该元素被重新定位,但它仍然占据原来的空间。 ```css /* 相对定位 */ .relative-element { position: relative; top: 20px; /* 向上移动 20px */ left: 10px; /* 向右移动 10px */ } ``` ##### 3. **Absolute(绝对定位)** 绝对定位将元素从标准文档流中移除,并将其放置在一个指定位置。如果父级元素设置了 `position` 属性为非 `static` 值,则子元素会相对于最近的已定位祖先元素;如果没有这样的祖先,则相对于初始包含块(通常是浏览器窗口)。 ```css /* 绝对定位 */ .absolute-element { position: absolute; top: 50px; right: 30px; } ``` ##### 4. **Fixed(固定定位)** 固定定位类似于绝对定位,但是固定的参照物是视窗本身而不是某个特定的HTML标签或者区域。即使用户滚动页面,这种类型的盒子也会保持不动[^2]。 ```css /* 固定定位 */ .fixed-element { position: fixed; bottom: 0; right: 0; } ``` ##### 5. **Sticky(粘性定位)** 粘性定位是一种混合形式,在某些条件下表现为相对定位而在另一些条件则像固定定位一样工作。通常来说,当目标对象位于可见区域内时表现得像是相对定位,一旦超出可视范围就变成固定定位。 ```css /* 粘性定位 */ .sticky-element { position: sticky; top: 10px; /* 距离顶部的距离 */ } ``` --- #### 三、实际应用场景与案例分析 以下是几个常见的场景以及如何利用不同种类的定位来解决问题: - **导航栏始终显示于顶端** 可以采用 Fixed Position实现这一需求,使得无论怎样滑动网页内容,导航条都维持在其设定好的地方不变形也不消失。 - **侧边栏跟随浏览行为变化** Sticky positioning 很适合用来创建随着用户的垂直滚动自动调整自己高度或状态的小部件,比如目录索引链接列表等。 --- #### 四、常见问题及其解决方案 1. **清除浮动导致的布局错乱** 当多个浮动物体并列存在时可能会引发后续非浮动项目无法正确计算宽度等问题。可以通过引入额外空白 div 设置样式 clear:both 或者运用 clearfix 技巧加以规避[^4]。 2. **层叠上下文混乱** 如果发现 z-index 不生效,请确认当前操作的对象确实处于同一层级关系之中,并且已经显式声明过相应的 position 参数值。 --- ### 总结 掌握好各种定位机制的特点及适用场合对于构建复杂灵活界面至关重要。每种方法都有各自的优势和局限之处,合理搭配才能达到最佳效果。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值