吸顶

最新推荐文章于 2024-06-20 18:49:43 发布
最新推荐文章于 2024-06-20 18:49:43 发布
阅读量238 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_33798436/article/details/56838513
版权
<!DOCTYPE html>
<html>


<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>38demo</title>
<link rel="stylesheet" href="img/mobile-reset.css" />
<style type="text/css">
html,body{
width:100%;
height:100%;
}
.title{
width:100%;
margin-bottom:20px;
background: #fff;
}
.titleTap{
position:fixed;
left:0;
top:0;
}
.a1{
margin-top:20px;
}
.title li{
width:33%;
float:left;
text-align: center;

}
.content{
text-align: center;
margin-top:20px;
z-index:100;
}
</style>
</head>


<body>
<!--other-->
<div class="topHeight">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<!--title-->
<ul class="title clearfix">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!--content-->
<ul class="content a1">
<li>11</li>
<li>13</li>
<li>14</li>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>
<ul class="content a2">
<li>21</li>
<li>22</li>
<li>23</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>
<ul class="content a3">
<li>31</li>
<li>32</li>
<li>33</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>31</li>
<li>32</li>
<li>33</li>
<li>21</li>
<li>22</li>
<li>23</li>
</ul>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
function nav(){
var height=0;
height = $(".topHeight").height();
$(window).scroll(function() {
var w = $("body").scrollTop() || $(document).scrollTop(); //获取滚动值
if(w > height) {
$(".title").addClass("titleTap");
} else if(w <= 0){
$(".title").removeClass("titleTap")
}else{
$(".title").removeClass("titleTap")
}
});
}
nav();
$(function() {
$(".title li").click(function() {
var index = $(this).index();

var offsetH = $(".content").eq(index).offset().top;
console.log(index);
console.log(offsetH);
$("body").animate({
scrollTop: offsetH-20,
}, 500);

})
})
</script>
</body>
</html>
sinat_33798436
关注
微信小程序---导航吸顶+锚点.rar
04-11
我们在做小程序的时候，难免会遇到页面里面有很长的数据，页面下面又有到导航栏部分；用户希望页面滑动到导航栏的位置，导航栏固定在页面的最上面，同时里面的数变化，也能改变导航栏的高亮
吸顶效果以及锚点定位的实现
acheding的博客
09-24 1078
吸顶效果以及锚点定位的实现，其中锚点定位伴有平滑效果，导航栏有切换动画。
微信小程序tab栏吸顶功能
最新发布
zss_base的博客
06-20 186
【代码】微信小程序tab栏吸顶功能。
导航滚动一定高度吸顶，锚点定位
12-05
网络上发现的案例。觉得不错就复制下来了。以便于自己改造！
实现一个 Vue 吸顶锚点组件方法
10-16
主要介绍了实现一个 Vue 吸顶锚点组件方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Android 实现锚点定位思路详解
01-20
相信做前端的都做过页面锚点定位的功能，通过<a> 去设置页面内锚点定位跳转。 本篇文章就使用tablayout、scrollview来实现android锚点定位的功能。 效果图： 实现思路 1、监听scrollview滑动到的位置，tablayout切换到对应标签 2、tablayout各标签点击，scrollview可滑动到对应区域 自定义scrollview 因为我们需要监听到滑动过程中scrollview的滑动距离，自定义scrollview通过接口暴露滑动的距离。 public class CustomSc
RecyclerView实现吸顶效果
11-19
本教程将详细讲解如何在RecyclerView中实现多布局以及吸顶（Sticky Header）效果。 首先，我们要理解RecyclerView的多布局（Multiple Layout Manager）功能。在RecyclerView中，我们可以为不同的数据项定义多种视图...
Android RecyclerView 实现滑动吸顶效果
05-15
本教程将详细介绍如何在RecyclerView中实现滑动吸顶（Sticky Header）效果，这一功能常见于各种应用，如天气预报、日历等，可以固定顶部某一栏在用户滚动时始终可见。 首先，我们要理解RecyclerView.ItemDecoration...
Android 仿京东首页 淘宝首页双层吸顶效果 悬停效果
12-12
在Android应用开发中，创建类似京东、淘宝首页的双层吸顶效果是一项常见的需求，它能够提供用户友好的浏览体验，使关键功能如搜索栏在滚动时始终保持可见。本项目"DoubleSuckTopDemo"正是为了实现这一效果而设计的。...
RecyclerVIew实现悬浮吸顶效果
08-29
RecyclerVIew实现悬浮吸顶效果详解 RecyclerVIew是一种常用的UI组件，用于显示大量数据的列表。但是，随着数据的增加，列表的头部固定不变的需求也随之增加。实现悬浮吸顶效果是解决这个问题的常见方法。下面我们将...
StickyHeaderForRecyclerView:史上最好用的吸顶库，支持复杂的吸顶自定义View，单类型吸顶功能，多类型吸顶功能，指定位置吸顶功能，设置吸顶偏移量，无缝配合AppBarLayout
05-11
StickyHeaderForRecyclerView 这可能是目前为止设计最精良的...增加重建吸顶时，如果下一个有可能吸顶的View与当前吸顶区域有重叠，吸顶向上联动 增加了处理RecyclerView数据变化时，重建吸顶功能 增加了处理Recyc
vue实现吸顶、锚点和滚动高亮按钮效果
qq_46617584的博客
08-05 3551
vue实现吸顶、锚点和滚动高亮按钮效果
RecyclerView实现吸顶效果项目实战（四），2021年Android开发爆款推荐
m0_65511857的博客
12-20 541
private void dispatchLayoutStep1() { … if (mState.mRunPredictiveAnimations) { … mLayout.onLayoutChildren(mRecycler, mState); … } else { clearOldPositions(); } … } dispatchLayoutStep1 方法中调用了 mLayout 的 onLayoutChildren 方法。上面分析告诉我们，mLayout 就是 LayoutManager，所以
Android - 吸顶效果 布局篇
宁静致远
07-06 3315
调研了一下微博和豆瓣等大体量的APP，发现内容详情页的评论吸顶效果非常常见。 以截图自豆瓣的效果为例，当上划至内容部分消失时，滑动中的回复条会置顶，并保持在位置不动。 笔者通过实践，记录下目前发现的最easy 的写法，只改变布局，不需要代码动态修改。使用方式如下： View A： 当滑动时，需要滑动上去不见的部分 View B：当滑动到顶端时，需要保持可见的部分 View C：一般来说是一个RecyclerView <androidx.coordinatorl...
js设置滚动条位置，有吸顶导航的情况下，调节位置
weixin_44462270的博客
04-16 630
js设置调节滚动条位置 获取跳转模块的位置 let top = document.getElementById(id).offsetTop; 设置纵向滚动条的位置 window.srollTo(x轴的移动距离(通常为0即可), top)
监听页面滚动条
huangjianfeng21的博客
07-19 3593
使用页面滚动条监听的场景 通常我们在开发过程中会遇到一些需求，比如：当页面向上滑动或者向下滑动时，当页面滚动条滑动到某个位置的时候，当页面滚动或者停止滚动的时候，当页面滚动到顶部或者底部的时候，需要做一些页面上的处理，那么这个时候我们就需要监控页面的滚动条 滚动条频繁触发的问题 监听页面是否在滚动 监听页面是否滚动到具体指定的某个位置（指定数值，顶部，底部） 监听滚动条的方向（向上...
markdown编辑器语法学习
yescomecn的博客
09-09 177
一、markdown 语法 1.标题 # 这是一级标题` ## 这是二级标题 ### 这是三级标题 #### 这是四级标题 ##### 这是五级标题 ###### 这是六级标题 2.代码段 这是一段代码 这是多行代码 print(123) 3.超链接 [baidu](http://www.baidu.com) baidu 4.图片 122331232 ...
【JQuery插件】元素根据滚动条位置自定义吸顶效果
weixin_34025051的博客
10-16 215
  ;(function($){ $.fn.extend({ /* 元素根据滚动条位置自定义吸顶插件 @defaultTop 初始化top位置 @startTop 开始滚动和回复原样的位置 @demo var ensureTop = $('#ensure').o...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值