react中让导航栏粘性定位

最新推荐文章于 2024-04-11 09:53:02 发布
最新推荐文章于 2024-04-11 09:53:02 发布
阅读量568 收藏 1
点赞数
分类专栏： react 文章标签： react.js 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/it_varlue/article/details/120593729
版权

 首先用到 react - sticky 这个插件 

先下载 

npm i -S react-sticky

 第二步在我们想要用到的地方引入

 

这是效果图 ,往扒拉的时候 这个导航栏一直在上面

 

 因为我用了antd组件 所以是写了renderTaBar = ( props , 以及默认的样式) 然后修改

 之前引入的sticky 就在这里使用  然后写你 是要距离底部还是顶部的时候生效 bottomOffset 或者是topOffset={80} , 然后写样式, 就是默认的antd的样式在加上你自己的样式第三步就Ok了

 第四步

用之前引入的StickyContainer标签把你要黏住的内容包裹起来 , 在他的第一层子级中加入刚才我们写的第三步 , 就成功,

 

 

码农的自我进化
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
吸顶 react_超优秀 React 粘性吸顶组件React-Sticky
weixin_42305622的博客
01-14 1937
昨天分享了一个Vue导航吸顶组件，今天继续给大家推荐一款React吸顶组件ReactSticky。react-sticky 基于react.js构建的轻量级滚动粘性库组件，star高达2.4K+。支持多个navbar或两列布局粘性。旨在让开发者创建sticky元素的UI更加容易。css3实现一个简单的吸顶结构。注意：position:sticky在IE下支持不够友好，大家使用前需视情况考虑。 吸...
推荐开源项目：React-Sticky-El - 轻松实现React元素粘性定位
最新发布
gitblog_00057的博客
05-27 233
推荐开源项目：React-Sticky-El - 轻松实现React元素粘性定位 项目地址:https://gitcode.com/gm0t/react-sticky-el 在构建响应式前端应用时，我们经常需要让特定元素（如导航栏或侧边栏）在滚动到指定位置后固定在屏幕上，这就是粘性布局的用途。今天，我们要向您推荐一个强大的React库——React-Sticky-El，它能够帮助您简单、高效地实现...
react-native 滑动吸顶效果
weixin_34335458的博客
06-02 3526
最近公司开发方向偏向移动端， 于是就被调去做RN（react-native），体验还不错，当前有个需求是首页中间吸顶的效果，虽然已经很久没写样式了，不过这种常见样式应该是so-easy，没成想翻车了，网上搜索换了几个方案都不行，最后去github上复制封装好的库来实现，现在把翻车过程记录下来。 需求效果 翻车过程 第一种方案 失败 一开始的思路是这样的，大众思路，我们需要监听页面的滚动状态，...
react-split-layout:用于实现粘性两面板布局的可嵌套的react组件
05-19
两面板布局 该组件的目标是实现两面板布局，其中行的内容根据每个面板内容的高度滚动。 行的高度由其最高的窗格确定。 如果行的延伸超出视口的高度，则较高的窗格将滚动，而较小的窗格将固定在视口的顶部。 @TODO：考虑类似的项目，但沿x轴滚动。 React热加载器的东西： 启用实时编辑React组件的最小开发环境。 用法 npm install npm start open http://localhost:3000 现在编辑src/App.js 您所做的更改将出现，而无需像那样重新加载浏览器。 林亭 这个样板项目包括React友好的ESLint配置。 npm run lint 使用0.0.0.0作为主机 您可能需要将server.js和webpack.config.js的主机从localhost更改为0.0.0.0以允许从同一WiFi网络进行访问。 默认情况下未启用此功能，因为据
React Native ListView sticky效果实现
Super灬LV
05-04 3218
项目技术点分析：       在React Native中，ScrollView组件可以使用 stickyHeaderIndices 轻松实现 sticky 效果；而使用ListView组件时，使用 stickyHeaderIndices 则不生效。       如何实现滚动时每个section header会吸顶？       在ListView中要实现 sticky ，需
react-reactstickyReact最强大可用的粘性库
08-15
React-sticky库广泛应用于各种场景，如导航栏、侧边栏菜单、滚动广告等，能有效提升用户体验，特别是在响应式设计中，让关键信息始终保持可见。 总结，React-sticky是React开发中一个实用的工具，它简化了实现页面...
粘性滑块导航，动态特效
06-01
在这个特效中，JavaScript可以用来监听滚动事件，当用户滚动到特定位置时触发导航栏的粘性效果。此外，还可以使用JavaScript来控制滑块的切换，比如自动轮播、手动点击切换等。库如jQuery或现代JavaScript框架（如...
Burble:Burble〜基于React的电影应用程序
03-07
粘性导航栏。 影片排序功能。 过滤的结果（在您键入时显示结果）。 主页按钮（易碎）〜具有应用程序重新加载功能。 以NetFlix主题为主题。 主题页脚。 截屏 依存关系 用途： 〜框架 样式 待办事项〜基本 ...
20余种菜单，导航栏特效
05-18
在网页设计中，菜单和导航栏是至关重要的组成部分，它们为用户提供了一种直观的方式来浏览网站内容。本资源“20余种菜单，导航栏特效”集合了多种通过CSS（层叠样式表）和JS（JavaScript）实现的动态效果，旨在提升...
optionally-app:OptionAlly React本机应用程序
03-07
内容描述OptionAlly旨在帮助您进行明智的期权交易。 选择您的基础股票，配置您的策略，并查看您的潜在风险和回报。技术领域 OptionAlly内置有：+ +源代码让我们看一下源代码。... 当用户按下标题栏中的三个
react-sticky-el
04-27
React粘el 用于React的粘性库。 演示版 安装 npm install react-sticky-el 概述和基本示例 您实际上要“粘贴”的元素应该包装在<Sticky>标记中。 道具的完整列表在下面，但典型用法如下所示： app.jsx import React , { Component } from 'react' ; import Sticky from 'react-sticky-el' ; ... class App extends Component ( { render ( ) { return ( ... < Sticky> < header> ... < / header > < / Sticky > . . .
react-native-sticky-item：受Facebook Stories启发的交互式粘性项目
02-05
粘性物品 受Facebook Stories启发的互动式便利贴。 安装 yarn add @gorhom/sticky-item # or npm install @gorhom/sticky-item 另外，您需要安装 ， 和 ，并按照其安装说明进行操作。 用法 ... import StickyItemFlatList from '@gorhom/sticky-item' ; // dummy data const data = [ ... Array ( 20 ) ] . fill ( 0 ) . map ( ( _ , index ) => ( { id : `item
探索React Native中的创新组件：react-native-sticky-item
gitblog_00048的博客
04-11 705
探索React Native中的创新组件：react-native-sticky-item 项目地址:https://gitcode.com/gorhom/react-native-sticky-item 在React Native的世界里，我们总是在寻找能够提升用户体验和界面效果的新颖组件。今天，让我们一起深入了解一下react-native-sticky-item，这是一个能够实现列表中元素...
React MUI（版本v5.15.2）详细使用
一步一个脚印，踏实努力，向着目标前进
12-30 1155
React MUI（版本v5.15.2）是一个流行的React UI框架，提供了大量预先构建的组件，可帮助开发人员快速构建高质量的用户界面。总的来说，React MUI是一个功能强大、灵活且易于使用的React UI框架，适合用来构建各种各样的Web应用程序。
React native sticky tab吸顶功能
yellowpig1210的专栏
10-19 1954
rn的吸顶实现思路和h5不同，且安卓可能有兼容性问题 思路一 使用ScrollView的stickyHeaderIndices属性 IOS支持，Android不支持 吸顶目标需要是Scrollview的第n+1个子节点 <ScrollView style={ s.container } onScroll = { this.onScroll } scrollEventThrottle = {1} showsVerticalScrollIndicator = ...
React-native实现定位的功能
分享Android开发知识
07-10 7383
1、在React-native中实现定位的功能的几种方式。 （1）.使用rn中的自带的Geolocation实现定位。 （2）.用第三放库react-native-location实现定位。 2.用rn中自带的Geolocation实现定位的详细步骤： （1）.如果是android进行定位手下是需要权限的通过以下代码设置权限： <uses-permission android:name="a...
使用 position:sticky 实现粘性布局
weixin_34143774的博客
02-15 1212
如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？ { position: static; position: relative; position: absolute; position: fixed; } 额，其实，我们还可以有这 3 个取值： { /* 全局值 */ p...
CSS 粘性定位position sticky 用法实践
毛祥明-Zoe
08-25 1581
CSS 粘性定位position sticky 用法实践sticky实际效果展示应用场景Note案例代码jsxless sticky css属性position为sticky的元素，根据正常的文档流（flow of the document）进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top, right, b
react-vant 导航栏 leftArrow属性在类组件中使用
05-31
在类组件中使用 `react-vant` 导航栏组件的 `leftArrow` 属性可以通过在 `render()` 方法中 return 一个带有 `onClick` 事件的元素来实现。具体可参考以下示例代码： ```jsx import { NavBar } from 'react-vant'; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值