js悬浮吸顶

最新推荐文章于 2024-05-22 13:52:22 发布
最新推荐文章于 2024-05-22 13:52:22 发布
阅读量77 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/lml-lml/p/10143969.html
版权

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>吸顶和锚点链接</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }
    
    .perent {
        background: #ccc;
        width: 100%;
    }
    
    p {
        text-align: center;
    }
    
    .header {
        width: 1200px;
        margin: 0 auto;
        height: 60px;
        background: greenyellow;
    }
    
    .fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 60px;
        margin: 0 auto;
        text-align: center;
        z-index: 10;
        background: #fff;
        box-shadow: 2px 0px 20px rgba(0, 0, 0, 0.3);
    }
    
    .tab {
        margin: 20px auto;
        height: 60px;
        overflow: hidden;
    }
    
    .tab li {
        width: 33%;
        float: left;
        border: 1px solid #007AFF;
        text-align: center;
        padding: 10px 0;
        border-radius: 10px;
        cursor: pointer;
    }
    .child{
        width: 600px;
        height: 100px;
        background: palegoldenrod;
        margin: 200px auto;
        border-radius: 10px;
    }
</style>

<body>
    <div class="perent">
        <p>测试数据测试数据</p>
        <p>测试数据测试数据</p>
        <p>测试数据测试数据</p>
        <p>测试数据测试数据</p>
        <p>测试数据测试数据</p>
        <p>测试数据测试数据</p>
        <p>测试数据测试数据</p>
        <p>测试数据测试数据</p>
        <p>测试数据测试数据</p>
        <p>测试数据测试数据</p>
        <p>测试数据测试数据</p>
        <p>测试数据测试数据</p>
        <div class="header">哈哈哈哈，猜我是谁啊</div>

        <ul class="tab" id="tab">
            <li class="item">11111</li>
            <li class="item">22222</li>
            <li class="item">33333</li>
        </ul>
        
        <div class="child">1111111111111</div>
        <div class="child">2222222222222</div>
        <div class="child">3333333333333</div>
    </div>
</body>
<script type="text/javascript" src="js/jquery-3.3.1.min.js">
</script>
<script>
    window.addEventListener("scroll", this.handleScroll);

    function handleScroll() {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var tabOffsettop=document.getElementById('tab').offsetTop
        if(scrollTop >= 278) {
            $('.header').addClass("fixed")
            $('.tab').addClass("fixed")
        } else {
            $('.header').removeClass("fixed")
            $('.tab').removeClass("fixed")
        }
    }
</script>

转载于:https://www.cnblogs.com/lml-lml/p/10143969.html

weixin_30498921
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
RecyclerVIew实现悬浮吸顶效果
08-29
主要为大家详细介绍了RecyclerVIew实现悬浮吸顶效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现顶部悬停效果
weixin_42307129的博客
01-18 2187
//gif是横盘把头歪着看会好点 //！！！！！！！！！！ &lt;!doctype html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="UTF-8"&gt;         &lt;title&gt;&lt;/title&gt;         &lt;meta name="viewpor
js 吸顶实现
dk123sw的博客
12-06 2000
效果： 第一种实现：使用DOM 主要思路是根据实时监听滚动条被向下拉动的距离，当其距离顶端小于某一值时使用position: fixed 固定。 核心代码 //获取距离页面顶端的距离 let titleTop = tit.offsetTop; //滚动事件 document.onscroll = function(){ ...
原生js实现吸顶效果
flower521528的博客
04-20 1539
什么是吸顶效果： css中固定定位（fixed）实现的效果就是吸顶效果 那么如何用js去操作。 代码如下 <style> * { margin: 0px; padding: 0px; } .top { /* width: 100%; */ width: 1000px; /* height...
导航栏吸顶动画
jiangjiang_ing的博客
02-15 626
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &amp
原生JS实现各种运动之悬浮侧边栏
越陌度阡
08-17 1654
在做网站开发的时候，经常会用到悬浮的侧边栏，让一些信息一直显示在当前的屏幕下，如联系方式与分享，下面给大家分享一个小Demo，实现效果如下： 以下是代码实现，欢迎大家复制粘贴及吐槽。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/.........
实现悬浮吸顶实现悬浮吸顶实现悬浮吸顶
09-04
使用RecyclerView实现悬浮吸顶功能； 使用RecyclerView实现悬浮吸顶功能； 使用RecyclerView实现悬浮吸顶功能。
android中RecyclerView悬浮吸顶效果
08-30
本篇文章主要介绍了android中RecyclerView悬浮吸顶效果，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js实现吸顶效果
Yugoup的博客
09-26 3094
今天在项目里遇到一个 吸顶 的需求，在这里记录一下js的写法 思路： 先在mounted里用window.addEventListener监听一下鼠标滚轮事件，再用getBoundingClientRect().top获取需要吸顶的box距离顶部的值，判断这个值是否<=0，如果是就给全局变量zyFixed赋值为true，在div里用三元运算进行判断，符合条件就添加一个isFixed类名。 &...
js导航吸顶效果
前端劝退工程师
07-01 1202
用fixed或者sticky固然可以实现 但是想要动画效果怎么办？ 思路 document.documentElement.scrollTop 判断当前页面有没有滚动，有的话加上一个吸顶效果的类名 代码 <header :class="{fixed:isFixed}" > ... mounted() { window.addEventListener('scroll', () => { this.isFixed = document.documentElemen
JQuery实现导航栏悬浮吸顶，（最新纯干货）！！！
qq_37698249的博客
10-16 1976
导航栏滚动一定距离后，悬浮吸顶 导航栏悬浮吸顶 JS代码： 1.先引入jquery <script> $(function () { $(window).scroll(function () { if ($(document).scrollTop() >= 621) { $(".nav").addCl...
原生JS 实现吸顶效果的三种方式
sspu_admin
04-30 1293
〇、三种方法的优劣 intersectionObserver本以为是最优解，实现时发现效果并不好。 因为这个API的优先级比较低，每次都要等待页面渲染完成之后才能再次响应，所以在快速滑动的时候会出现抖动。 流畅度：CSS >= scroll > intersectionObserver 性能：CSS>= intersectionObserver >= scroll 兼容性：scroll > intersectionObserver > CSS 一、通过监听全局scro
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
u010234868的专栏
05-17 221
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
Vue.js的发展史（一）
2301_79683791的博客
05-15 781
Vue (发音为 /vjuː/，类似view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无论是简单还是复杂的界面，Vue 都可以胜任。来源官方解释-----简介 | Vue.js (vuejs.org)简单来说：Vue是一个属于JS的库，可直接引入一个JS文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架。
【学习笔记】后端（Ⅰ）—— NodeJS（Ⅱ）
Eddie_hyh的博客
05-21 465
NodeJS（Ⅱ）
React函数式组件的父子方法互相调用，父组件调用子组件方法，子组件调用父组件方法
SongZhengxing_的博客
05-18 208
子组件需要使用 forwardRef 函数包裹，然后使用 useImperativeHandle 暴露属性和方法。编写子组件 Child。
前端开发攻略---用Vue实现无限滚动的几种方法
最新发布
nibabaoo的博客
05-22 421
用vue实现无限滚动
虚拟列表 vue-virtual-scroller 的使用
小秀的博客
05-22 295
【代码】虚拟列表 vue-virtual-scroller 的使用。
【MySQL精通之路】AdminAPI-使用
Anakki的博客
05-19 692
本文介绍MySQL SHELL提供的MySQL AdminAPI，使您能够，使用它们创建和，并集成。
android 实现RecyclerView悬浮吸顶效果
08-10
要实现RecyclerView悬浮吸顶效果，可以使用以下步骤： 1. 创建一个布局文件，包含两个部分：一个用于悬浮显示的视图，一个用于RecyclerView。 2. 在Activity或Fragment中，找到RecyclerView并设置布局管理器和适配器。 3. 创建一个自定义的RecyclerView.ItemDecoration类，用于绘制悬浮视图。 4. 在自定义的ItemDecoration类中，重写getItemOffsets()方法，在该方法中计算悬浮视图的高度，并将其应用到RecyclerView的第一个可见项之上。 5. 在自定义的ItemDecoration类中，重写onDraw()方法，在该方法中绘制悬浮视图。 6. 在Activity或Fragment中，为RecyclerView添加ItemDecoration。 下面是一个简单的示例代码： 1. 创建布局文件（例如：activity_main.xml）： ```xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:id="@+id/floating_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Floating View" android:background="#FF0000" android:textColor="#FFFFFF" android:padding="16dp" android:visibility="gone" /> <androidx.recyclerview.widget.RecyclerView android:id="@+id/recyclerview" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_below="@id/floating_view" /> </RelativeLayout> ``` 2. 在Activity或Fragment中，设置RecyclerView的布局管理器和适配器： ```java // 找到RecyclerView RecyclerView recyclerView = findViewById(R.id.recyclerview); // 设置布局管理器 recyclerView.setLayoutManager(new LinearLayoutManager(this)); // 设置适配器 recyclerView.setAdapter(adapter); ``` 3. 创建一个自定义的ItemDecoration类（例如：FloatingHeaderDecoration.java）： ```java public class FloatingHeaderDecoration extends RecyclerView.ItemDecoration { private View mFloatingView; public FloatingHeaderDecoration(View floatingView) { mFloatingView = floatingView; } @Override public void getItemOffsets(@NonNull Rect outRect, @NonNull View view, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) { super.getItemOffsets(outRect, view, parent, state); if (parent.getChildAdapterPosition(view) == 0) { outRect.top = mFloatingView.getHeight(); } } @Override public void onDraw(@NonNull Canvas canvas, @NonNull RecyclerView parent, @NonNull RecyclerView.State state) { super.onDraw(canvas, parent, state); int top = parent.getPaddingTop(); int bottom = top + mFloatingView.getHeight(); int left = parent.getPaddingLeft(); int right = parent.getWidth() - parent.getPaddingRight(); mFloatingView.setVisibility(View.VISIBLE); mFloatingView.layout(left, top, right, bottom); mFloatingView.draw(canvas); } } ``` 4. 在Activity或Fragment中，为RecyclerView添加ItemDecoration： ```java // 找到悬浮视图 View floatingView = findViewById(R.id.floating_view); // 创建自定义的ItemDecoration并添加到RecyclerView recyclerView.addItemDecoration(new FloatingHeaderDecoration(floatingView)); ``` 这样就实现了RecyclerView的悬浮吸顶效果。悬浮视图会在滚动时始终保持在顶部，并且不会被其他项覆盖。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值