js 吸顶 vue 吸顶

客官°小女子只卖身不卖艺 2022-01-23 13:11 364阅读 0赞

页面吸顶的效果， 实现有两种， 最快的一种是用position: sticky方法， 不过该方法尚存在兼容性问题， 使用的时候需加入兼容方法。

使用方法跟position: fixed类似。 只要设定好吸顶时候的位置就行了。

<div class="title title_sticky"> Title </div>
    
    <style>
    .title {
    	height: 30px;
    	width: 100%;
    	line-height: 30px;
    	text-align: center;
    	background-color: #009975;
    	color: #ffffff;
    }
    .title_sticky {
    	position:-webkit-sticky; 
    	position: sticky;
    	top: 0;
    	left: 0
    }
    </style>

第二种是用js来控制

思路很简单， 当滚动条滚动距离大于导航条距顶部的距离时，为导航条采用窗口固定

<div class="title" id="title"> title </div>
    
    <style>
    .title {
    	height: 30px;
    	width: 100%;
    	line-height: 30px;
    	text-align: center;
    	background-color: #009975;
    	color: #ffffff;
    }
    
    .title_fixed{
        position: fixed;
        top:0;
        left: 0;
    }
    </style>
    
    <script>
    var obj = document.getElementById("title")
    var ot = obj.offsetTop // title在页面中距离页面头部的高度
    
    document.onscroll = function () {
    	var st =  document.body.scrollTop || document.documentElement.scrollTop; 
    	// 往下滚定时候， 滚动条距离顶部不断变大的高度（滚动距离）
    	if (st >= ot) {
    		obj.className = 'title title_fixed'
    	} else {
    		obj.className = 'title'
    	}
    }
    </script>

使用vuejs的话, 可以参考一下这篇文章[https://www.cnblogs.com/\_error/p/9648185.html][https_www.cnblogs.com_error_p_9648185.html], 实现方法也是js

[https_www.cnblogs.com_error_p_9648185.html]: https://www.cnblogs.com/_error/p/9648185.html

发表评论取消回复

表情：

评论列表（有 0 条评论，364人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue监听滚动事件实现元素吸顶

添加滚动监听事件： mounted () \{ window.addEventListener('scroll', this.handleScroll) \},

偏执的太偏执、/ 2023年06月14日 04:27/ 0 赞/ 26 阅读

相关 vue列表项吸顶 js+css两种骚操作

demo需求：vue项目中，在列表里，滑动到哪个日期的时候，哪个日期就吸顶显示： ![在这里插入图片描述][20210111115247111.gif] js方法：

Bertha 。/ 2023年01月05日 01:21/ 0 赞/ 144 阅读

相关小程序标签滑动吸顶

1、HTML <view class="title { {isFixedTop?'title-fixed':''}}" id="navbar">

妖狐艹你老母/ 2022年11月14日 12:00/ 0 赞/ 208 阅读

相关元素滚动吸顶效果

position: sticky 粘性定位的元素是依赖于用户的滚动. 它的行为就像 position:relative，而当页面滚动超出目标区域时，它的表现就像 posit

曾经终败给现在/ 2022年11月03日 10:43/ 0 赞/ 241 阅读

相关小程序吸顶效果

<template> <view class="full"> <view class="full222"> </vie

比眉伴天荒/ 2022年10月05日 08:58/ 0 赞/ 242 阅读

相关 Vue 滚动导航栏固定(导航吸顶)

[Vue导航条吸顶效果 - 简书][Vue_ -] [https://www.cnblogs.com/nbwsj/p/12122689.html][https_www.cnb

痛定思痛。/ 2022年09月10日 06:30/ 0 赞/ 400 阅读

相关 html设置吸顶效果

html设置吸顶效果方法一：js设置 window.onscroll = function () { // 滑动时搜索框吸顶

青旅半醒/ 2022年09月03日 05:17/ 0 赞/ 549 阅读

相关 js 吸顶 vue 吸顶

页面吸顶的效果，实现有两种，最快的一种是用position: sticky方法，不过该方法尚存在兼容性问题，使用的时候需加入兼容方法。使用方法跟position:

客官°小女子只卖身不卖艺/ 2022年01月23日 13:11/ 0 赞/ 365 阅读

相关 UWP实现吸顶的Pivot

[UWP实现吸顶的Pivot][UWP_Pivot] 原文: [UWP实现吸顶的Pivot][UWP_Pivot 1] 话不多说，先上效果 ![shy-header.g

旧城等待，/ 2021年10月26日 14:30/ 0 赞/ 375 阅读

相关 vue中实现元素吸顶效果

效果图： ![20210502105208962.gif][] 注意：窗口会抖动，体验不是很好，后期再优化代码实现： <template>

分手后的思念是犯贱/ 2021年07月25日 13:40/ 0 赞/ 959 阅读