精华内容
下载资源
问答
  • 吸顶效果

    2020-08-30 18:55:41
    吸顶效果 1.html <!-- 原理:根据屏幕滚动的距离,动态控制class的值,控制元素的位置。 --> <div id="showDays" :class="headerFixed?'issFixed':''"> <van-tabs v-model="active"> <van-...

    吸顶效果

    1.html

    <!-- 原理:根据屏幕滚动的距离,动态控制class的值,控制元素的位置。 -->
    <div id="showDays" :class="headerFixed?'issFixed':''">
        <van-tabs v-model="active">
          <van-tab title="标签 1">内容 1</van-tab>
          <van-tab title="标签 2">内容 2</van-tab>
          <van-tab title="标签 3">内容 3</van-tab>
        </van-tabs>
    </div>
    

    2. javascript

     data() {
        return {
          headerFixed:0, //是否吸顶 条件
          offsetTop:0  //元素的offsetTop
        }
      },
    mounted() { 
        // 监听dom渲染完成
    		this.$nextTick(function(){
    		// 这里fixedHeaderRoot是吸顶元素的ID
    		let header = document.getElementById("showDays");
    		// 这里要得到top的距离和元素自身的高度
    		this.offsetTop = header.offsetTop;
    		console.log("offsetTop:" + this.offsetTop);
    		});
    	// handleScroll为页面滚动的监听回调
    		window.addEventListener('scroll', this.handleScroll);
      },
     destroyed(){
    		window.removeEventListener('scroll', this.handleScroll);
    	},
    	
    methods: {
        handleScroll(){
    		// 得到页面滚动的距离
    		let scrollTop = window.pageYOffset || document.documentElement.scrollTop ||document.body.scrollTop;						
        // 判断页面滚动的距离是否大于吸顶元素的位置       console.log("divoffsetTOP"+document.getElementById("showDays").offsetTop);
    
          //如果滚动距离 大于元素的offsetTop 就返回1,吸顶
          //如果滚动距离 小于元素的offsetTop 就返回0,不吸顶
         this.headerFixed=scrollTop>this.offsetTop?1:0
    		},
    

    3. css

    .issFixed{
    	position: fixed;
    	top:0px;
    	left:0px;
    	right:0px;
    	z-index: 4;
    }	
    
    展开全文
  • 前言:吸顶效果图:1、滚动前:image.png2、滚动中:image.png3、滚动超过后:image.png直观效果可参...:class="{'is_fixed' : isFixed}"触发吸顶效果的位置,如下:image.png下方代码自取↓第二步:data 定义中:i...

    前言:吸顶效果图:

    1、滚动前:
    e6924977504916ba4fe4fe6555248d03.png

    image.png

    2、滚动中:
    9d467396f54dd567d332bb5343d7c8dc.png

    image.png

    3、滚动超过后:
    3d082875a7b26659dfedd38746f419b0.png

    image.png

    直观效果可参pc端微博左侧的信息栏

    第一步:html 中:

    在你要实现吸顶效果的div上,加上如下这一行代码:

    cc762d0031b6d6ecd04869ee71772e9f.png

    image.png


    下方代码自取↓

     :class="{'is_fixed' : isFixed}"

    触发吸顶效果的位置,如下:

    13aeb727ab7d646e0371453fc482089e.png

    image.png


    下方代码自取↓

    第二步:data 定义中:

    f61275c62205110fd26d1c923dcf1ead.png

    image.png


    下方代码自取↓

    data() {    return {        isFixed: false,        offsetTop: 0,        }    }

    第三步:在 mounted 与 destroyed 中

    mounted() {    window.addEventListener('scroll', this.initHeight);    this.$nextTick(() => {    //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置     this.offsetTop = document.querySelector('#boxFixed').offsetTop;    })},//回调中移除监听destroyed() {    window.removeEventListener('scroll', this.handleScroll)},

    第四步:在 methods 方法定义中:

    /********* start-目录吸顶********/initHeight() {// 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)         var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop//如果被卷曲的高度大于吸顶元素到顶端位置 的距离          this.isFixed = scrollTop > this.offsetTop ? true : false;},/********* end-目录吸顶********/

    最后一步:在css中:

    .is_fixed{     width: 100%;     position: fixed;     top: 0;     z-index: 999;}

    大功告成。

    展开全文
  • 小程序吸顶效果我是标题我是子标题导航一个导航一个导航一个导航一个我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是...

    小程序吸顶效果

    我是标题我是子标题

    导航一个

    导航一个

    导航一个

    导航一个

    我是一个内容

    我是一个内容

    我是一个内容

    我是一个内容

    我是一个内容

    我是一个内容

    我是一个内容

    我是一个内容

    我是一个内容

    我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容我是一个内容

    //index.js//获取应用实例

    const app =getApp()

    Page({

    data: {

    getDeomtop:'',

    isFlixed:false},

    onLoad:function() {var that = this;

    wx.createSelectorQuery().select('.nav-group').boundingClientRect(function(rect) {

    that.setData({ getDeomtop: rect.top })

    }).exec()

    },

    onPageScroll(e) {var that = this

    var domeHeight =that.data.getDeomtopvar isScrollTop =e.scrollTop

    console.log(domeHeight)

    console.log(e.scrollTop)if (isScrollTop >=domeHeight) {

    that.setData({ isFlixed:true})

    console.log(that.data.isFlixed)

    }else{

    that.setData({ isFlixed:false})

    }

    }

    })

    /**index.wxss**/.outside-img {

    position: fixed;

    width:100%;

    top:0;

    left:0;

    z-index: -1;

    }

    .outside-box {

    position: absolute;

    left:0;

    top:0;

    width:100%;

    }

    .show-eg-img {

    position: absolute;

    left:0;

    top:0;

    height: 220px;

    width:100%;

    }

    .inside-img {

    position: fixed;

    left:0;

    top:0;

    height: 100rpx;

    width:100%;

    z-index: 10;

    overflow: hidden;

    }

    .nav-group {

    display: flex;

    position: relative;

    z-index: 12;

    height: 100rpx;

    line-height: 100rpx;

    }

    .nav-group view {

    flex:1;

    color: #666;

    text-align: center;

    }

    .heade-title {

    position: relative;

    z-index: 11;

    font-size: 34rpx;

    }

    .content-text view {

    height: 300rpx;

    line-height: 300rpx;

    }

    .flixedclass {

    position: fixed;

    width:100%;

    left:0;

    top:0;

    }

    简单的吸顶效果

    padding:0;

    margin:0;

    }

    #nav {

    width:100%;

    height:60px;

    background:#39f;

    color:#fff;

    line-height:60px;

    text-align:center;

    padding:0;

    margin:0;

    }

    #nav li {float:left;

    width:20%;

    height:60px;

    }

    .fix {

    position:fixed;

    top:0;

    left:0;

    z-index: 1;

    }

    .hader-img {

    position: fixed;

    left:0;

    top:0;

    }

    .content {

    position: relative;

    z-index: 2;

    }

    商城标题

    子标题子标题子标题子标题子标题子标题子标题

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    这个是一个吸顶效果,吸顶效果啊

    let rect =headerNav.getBoundingClientRect();//获得页面中导航条相对于浏览器视窗的位置

    let childDemoe = document.createElement("div");

    headerNav.parentNode.replaceChild(childDemoe, headerNav);

    childDemoe.appendChild(headerNav);

    childDemoe.style.height= rect.height + "px";//获取距离页面顶端的距离

    var headerNavleTop =headerNav.offsetTop;//滚动事件

    document.onscroll = function(){//获取当前滚动的距离

    var btop = document.body.scrollTop||document.documentElement.scrollTop;//如果滚动距离大于导航条据顶部的距离

    if(btop>headerNavleTop){//为导航条设置fix

    headerNav.className = "clearfix fix";

    }else{//移除fixed

    headerNav.className = "clearfix";

    }

    }

    后续优化

    展开全文
  • 使用css实现吸顶效果很简单,position:sticky ,再设置相对应的top值就好了但要注意,要做浏览器兼容 position: -webkit-sticky;下面是代码的实现Document*{margin: 0;padding: 0;list-style: none;}.wrap{width: 100...

    使用css实现吸顶效果很简单,position:sticky ,再设置相对应的top值就好了

    但要注意,要做浏览器兼容 position: -webkit-sticky;

    下面是代码的实现

    Document

    *{

    margin: 0;

    padding: 0;

    list-style: none;

    }

    .wrap{

    width: 100%;

    height: 1000px;

    }

    .title{

    width: 100%;

    height: 300px;

    text-align: center;

    background: chocolate;

    }

    .nav{

    /* 兼容chorme */

    position: -webkit-sticky;

    position: sticky;

    top: 0px;

    width: 100%;

    height: 40px;

    text-align: center;

    background: chartreuse;

    color: #fff;

    }

    .item-list{

    width: 100%;

    height: 20px;

    display: inline-block;

    background: cornflowerblue;

    color: #fff;

    }

    css吸顶效果实现
    • 海上生明月天涯若比邻
    • 海上生明月天涯若比邻
    • 海上生明月天涯若比邻
    • 海上生明月天涯若比邻
    • 海上生明月天涯若比邻
    • 海上生明月天涯若比邻
    • 海上生明月天涯若比邻
    • 海上生明月天涯若比邻
    • 海上生明月天涯若比邻

    实现效果

    320a6d698126

    image.png

    向下滚动

    320a6d698126

    image.png

    展开全文
  • 因为之前没有做吸顶效果,搜索内容然后滚下去,没有找到内容需要再手动划上来。方案一:JS 实现js 无敌大法好。兼容极佳,但是体验上就比较感人了。这里不过多介绍。方案二:Fixed 实现fixed 是基于浏览器的定位,在...
  • Vue吸顶效果

    2020-05-15 14:22:54
    前言:吸顶效果图: 1、滚动前: 2、滚动中: 3、滚动超过后: 第一步:html 中: 在你要实现吸顶效果的div上,加上如下这一行代码: :class="{'is_fixed' : isFixed}" 触发吸顶效果的位置...
  • MultiType-Adapter打造悬浮吸顶效果 注:当前版本只适合配合RecyclerView快速打造一款 展示UI 悬浮吸顶效果,如 通讯录效果,由于实现机制的原因,暂时不支持触摸事件。 MultiType-Adapter介绍地址:MultiType-...
  • 原生js实现吸顶效果

    2020-10-20 05:19:54
    本文主要介绍了原生js实现吸顶效果的示例。具有很好的参考价值。下面跟着小编一起来看下吧
  • js实现导航吸顶效果

    2020-10-20 08:16:13
    本文主要分享了js实现导航吸顶效果的示例代码,具有很好的参考价值,下面跟着小编一起来看下吧
  • 主要为大家详细介绍了RecyclerVIew实现悬浮吸顶效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • flutter 吸顶效果

    2021-01-26 14:55:52
    今天在做一个吸顶效果时,发现了一些问题: 我是用的是官方widgetCustomScrollView+SliverAppBar 可向下拉伸并虚化背景功能代码: CustomScrollView( controller: _scrollController, physics: const ...
  • 主要为大家详细介绍了js实现移动端吸顶效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • Html吸顶效果

    2019-09-14 05:33:52
    本文转载于:猿2048网站Html吸顶效果 Html吸顶效果 一、HTML HTML中需要给div一个id <!DOCTYPE html> <html lang="en"> <head> <meta charset="U...
  • 2.分组类标标题实现吸顶效果;先上效果图:其实就是自定义一个RecyclerView.ItemDecoration,自己实现分割线,分组标签也是分割线来实现的:上代码package com.example.recylerviewdemo;import android.content....
  • Flutter吸顶效果

    千次阅读 2020-02-17 22:26:31
    关于吸顶效果,在Flutter当中,已经提供了这么一个控件,但是由于太复杂,所以网上的资料有些少,本文章主要利用Flutter自带的这种吸顶动画控件,配合着动画完成的一个用户中心的页面。 import 'package:flutter/...
  • CSS吸顶效果

    2021-04-13 16:37:53
    CSS吸顶效果 /*吸顶*/ <div class="sticky sticky-top"></div> /*吸底*/ <div class="sticky sticky-bottom"></div> style中写 .sticky{ position: -webkit-sticky; position: sticky; ...
  • 滑动吸顶效果

    2019-09-26 15:16:37
    最近在做一个项目,顶部titlebar,下方轮动banner(也就是普通的轮播图),底部通用的分类文章内容,滑动超过一定距离分类吸顶效果,类似于高德地图,搜索输入‘极客地图’效果; 滑动吸顶附带上拉...
  • 前端实现吸顶效果1、监听scroll事件,实现吸顶功能2、css实现吸顶写页面经常会遇到这种需求:导航菜单初始位置不在头部,滑动页面时候当导航菜单滑到头部位置就固定在头部,往下滑导航菜单又回到初始位置。...
  • ScrollView 吸顶效果

    2020-09-14 00:31:30
    吸顶效果前,先记录一个简单的标题渐变效果。 1.1 简单显示和隐藏 监听滚动,只控制显示和隐藏,布局初始隐藏,不用设置渐变度。 1.2 渐变效果 监听滚动,通过设置alpha(范围0~1),实现布局渐变。 1.3 通过设置背景...
  • 小程序吸顶效果 <!--index.wxml--> <view class="container"> <view class='outside-img'> <view class='outside-box'> <image class='show-eg-img' src='https://timg...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,078
精华内容 431
关键字:

吸顶效果