开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使imageView在折叠工具条到达一定高度时消失

在折叠工具条到达一定高度时使imageView消失，可以通过以下步骤实现：

首先，需要获取折叠工具条的高度。可以使用前端开发技术，如HTML、CSS和JavaScript来创建一个折叠工具条，并通过CSS样式设置其高度。
在JavaScript中，可以使用DOM操作获取折叠工具条的高度。例如，可以使用document.getElementById方法获取折叠工具条的元素，然后使用offsetHeight属性获取其高度。
接下来，需要监听页面滚动事件，以便在折叠工具条到达一定高度时触发相应的操作。可以使用JavaScript中的window.addEventListener方法来监听滚动事件。
在滚动事件的处理函数中，可以通过比较页面滚动的距离与折叠工具条的高度来确定是否达到了消失的条件。如果达到了条件，可以使用JavaScript修改imageView的样式，将其隐藏。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
  <style>
    #toolbar {
      height: 100px;
      background-color: #f0f0f0;
    }
    #imageView {
      height: 200px;
      background-color: #ccc;
    }
  </style>
</head>
<body>
  <div id="toolbar"></div>
  <div id="imageView"></div>

  <script>
    window.addEventListener('scroll', function() {
      var toolbarHeight = document.getElementById('toolbar').offsetHeight;
      var imageView = document.getElementById('imageView');

      if (window.pageYOffset >= toolbarHeight) {
        imageView.style.display = 'none';
      } else {
        imageView.style.display = 'block';
      }
    });
  </script>
</body>
</html>

在上述示例代码中，折叠工具条的高度设置为100px，imageView的高度设置为200px。当页面滚动距离超过100px时，imageView会消失。

腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：提供弹性计算能力，支持多种操作系统，适用于各类应用场景。详情请参考：https://cloud.tencent.com/product/cvm
云函数（SCF）：无服务器计算服务，可按需运行代码，无需管理服务器。详情请参考：https://cloud.tencent.com/product/scf
云数据库 MySQL版（CDB）：提供稳定可靠的云端数据库服务，支持高可用、备份恢复等功能。详情请参考：https://cloud.tencent.com/product/cdb
人工智能机器学习平台（AI Lab）：提供丰富的人工智能开发工具和服务，支持图像识别、语音识别、自然语言处理等功能。详情请参考：https://cloud.tencent.com/product/ailab

相关搜索:如何使用条件if (JavaScript)使div在一定距离后消失如何使div在提交时随过渡消失？在快速展开和折叠tableview单元格时如何更改imageview中图像如何使Expander的图标在展开/折叠时移动到边缘如何使Bootstrap 3导航栏在导航栏折叠时从下拉菜单变为折叠？如何使滚动页面即使在tabBarView到达顶端时也能继续？颤动如何使文本上的垂直线在结束时消失？如何使youtube <iframe>中的视频在向下滚动html时消失如何在R中找到在一定高度上砍树时的簇数在使用table - borders类时，如何使某些表单元格边框消失？如何使添加到DOM中的只有1个img在双击时消失？如何使UILabel在图像未被跟踪时出现在屏幕上，并在图像被跟踪时消失如何使用JAVASCRIPT而不是jQuery使div在点击按钮时可展开-可折叠到左侧？当amp-iframe在视口中时，如何使amp-iframe的高度在amp上动态？当用户在React中移动到另一个页面时，如何使错误消息消失？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

iOS-视频播放器的简单封装

iOS-视频播放器的简单封装封装视频播放器，首先需要了解视频播放器的实现，iOS9之前可以使用MediaPlayer来进行视频的播放，iOS9之后系统推荐使用AVFoundation框架实现视频的播放。如果仅仅是播放视频两者的使用都非常简单，但是相比MediaPlayer，AVPlayer对于视频播放的可控制性更强一些，可以通过自定义的一些控件来实现视频的播放暂停等等。因此这里使用AVPlayer的视频播放。封装视频播放器，首先需要实现视频播放器，然后再去考虑怎样封装可以让以后自己使用起来方便快捷。

界面无小事(九): 做个好看的伸缩头部

github传送门前言之前也是写了RecyclerView的内容, 这次再补充伸缩头部的实现. 港真, 伸缩头部是那种看到第一眼就会爱上的视图效果, 好看又简洁. 本文内容较多, 需要10分

02

CoordinatorLayout使用全解析

CoordinatorLayout是在 Google IO/15 大会发布的，遵循Material 风格，包含在 support Library中，结合AppbarLayout, CollapsingToolbarLayout等可产生各种炫酷的效果，本篇博客就将介绍CoordinatorLayout的各种酷炫效果。

02

Telerik RadControls for ASP.NET AJAX

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/161963.html原文链接：https://javaforall.cn

00

通过来模仿稀土掘金个人页面的布局来学习使用CoordinatorLayout

特别喜欢稀土掘金个人界面的样子，那我们就来看看如何实现这个效果吧，要想实现这个效果，肯定需要的是Material Design风格，那就需要学会使用以下控件：CoordinatorLayout，App

09

Mockplus原型交互跟我做之3 - 认识“链接点”

上两次，我们已经快速地做了一个可以实用的交互（自动消失的消息框），还做了一个花哨但没用的东西，旋转的风车。暂时缓缓往下走，我们先来了解点“基本知识”，Mockplus几乎不需要学习，不过呢，如果多

07

Jupyter notebook使用技巧大全

Jupyter Notebook是一款开源的web应用，它允许使用者创建和分享包含代码，公式，可视化图表和纯文本的文档，并支持多种编程语言的交互式计算，对于python用户来讲更是一款十分方便的代码编写工具。只需要通过web浏览器就可以很方便地进行数据清洗和转换，数值模拟，统计建模，数据可视化，机器学习等。本文主要介绍Jupyter Notebook结合python的使用。

03

Android之MaterialDesign应用技术2-仿支付宝上滑搜索框缓慢消失

PS：在这之前也就是上一篇介绍了MaterialDesign一些滑动删除、标题栏的悬浮效果等，如果没看过第一篇的小火鸡可以看一下，因为这篇是接着上一篇写的，有一些东西上一篇写过了这里就不在重复了（MaterialDesign应用技术一），这篇也是上一篇的升级版，在我们日常写界面的时候，都想简单并且界面美观，这就少不了动画效果，MaterialDesign我们一般用到的动画，里面都有，不用我们自己写，在这个强大的库里，他都能够做什么呢，让我们来简单看一下。上滑顶部背景图片缓慢消失，标题悬浮在标题上栏加

六天完成一个简单iOS App - 第六天

第六天任务推荐标签页面的完成圆形头像的设置和封装评论界面的完成新帖界面的完成发布界面的完成推荐标签页面的完成点击精华页面左上角按钮来到推荐标签界面。推荐标签界面推荐标签的实

05

Android实现可拖拽列表和多选功能

本文实例为大家分享了Android实现可拖拽列表和多选的具体代码，供大家参考，具体内容如下

02

Android 折叠式布局

从头开始先建立一个名为 Folding 项目，然后在创建一个Activity, OneActivity 这个Activity带有自身的XML布局文件，

02

Material Design之CollapsingToolbarLayout 相关属性和方法介绍

Material Design之CollapsingToolbarLayout 相关属性和方法介绍

03

详解android特性之CoordinatorLayout用法探析实例

当我在AS上新建一个module时，系统默认的最外层布局不再是我们熟悉的五大布局中的一种，而是一个全新的布局：CoordinatorLayout。它是Material风格的重要组件, 作为布局的顶层控件，协调(Coordinate)其他组件, 实现联动。

04

layui表格套模块（表格）

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，门槛极低，拿来即用。其外在极简，却又不失饱满的内在，体积轻盈，组件丰盈，从核心代码到 API 的每一处细节都经过精心雕琢，非常适合界面的快速开发。layui 首个版本发布于2016年金秋，她区别于那些基于 MVVM 底层的 UI 框架，却并非逆道而行，而是信奉返璞归真之道。准确地说，她更多是为服务端程序员量身定做，你无需涉足各种前端工具的复杂配置，只需面对浏览器本身，让一切你所需要的元素与交互，从这里信手拈来。

08

从0系统学Android--3.1编写UI界面

界面设计和功能开发同样重要，界面美观的应用程序不仅可以大大增加用户粘性，还能帮我们吸引到更多的新用户。Android 系统为我们提供了大量的 UI 开发工具，只要合理的使用它们，就可以编写出各种各样漂亮的界面。

01

CoordinatorLayout与滚动的处理

本博文专门讲解和CoordinatorLayout相关的知识点，这也是Design Support Library中最重要与最难的部分。

02

【翻译】MotionLayout实现折叠工具栏（Part 1）

2018-08-13 by Liuqingwen | Tags: Android 翻译 | Hits

03

Android Studio preview 不固定及常见问题的解决办法

Android Studio提供了一个强大的“Preview”工具，可以帮助您预览您的布局文件将如何在用户的设备上呈现。XML布局可能是Android开发中最常用的资源。您的项目中每个活动至少有一个布局文件。 Android Studio的预览工具可帮助您实现这些伟大的设计，并快速迭代它们，甚至不需要运行您的应用程序。它还允许您查看布局的不同配置，例如在纵向或横向时的外观，或者TextView在多个语言环境（如英语，德语或希腊语）上的外观。

03

使用CoordinatorLayout打造各种炫酷的效果

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/gdutxiaoxu/article/details/52858598

01

CollapsingToolbarLayout使用

我们来看一下CollapsingToolbarLayout的使用场景。 CollapsingToolbarLayout 可以看到，Toolbar的标题放大并在下方显示，当我们向上滑动列表时，顶部He

06

【iOS 开发】基本 UI 控件详解 (UIButton | UITextField | UITextView | UISwitch)

博客地址 : http://blog.csdn.net/shulianghan/article/details/50051499 ;

02

[第二周]Jupyter Notebook和Markdown知识点汇总

打开Notebook，可以看到主面板。在菜单栏中有Files、Running、Clusters、Conda四个选项。用到最多的是Files，我们可以在这里完成notebook的新建、重命名、复制等操作。具体功能如下：

00

皕杰报表如何在web页面调节大小和位置和按钮？

控制页面大小的参数有两个，一个是rptwidth，一个是rptheight，分别代表报表在页面的输出宽度和高度，支持像素和百分比。

03

Window对象

window作为全局变量，代表了脚本正在运行的窗口，将属性与方法暴露给JavaScript。

02

用 CoordinatorLayout 处理滚动

原文地址：Handling Scrolls with CoordinatorLayout 原文作者：CODEPATH 译文出自：掘金翻译计划本文永久链接：github.com/xitu/gold-m… 译者：Feximin 总览 CoordinatorLayout 扩展了完成 Google's Material Design 中的多种滚动效果的能力。目前，此框架提供了几种不需要写任何自定义动画代码就可以（使动画）工作的方式。这些效果包括：上下滑动 Floating Action Button 以给 Sn

09

Android开发笔记（一百三十六）可折叠工具栏布局CollapsingToolbarLayout

上一篇博文《Android开发笔记（一百三十五）应用栏布局AppBarLayout》阐述了如何把Toolbar往上滚动，那反过来，能不能把Toolbar往下拉动呢？这里要明确一点，Toolbar本身是页面顶部的工具栏，其上没有本页面的其它控件了，如果Toolbar被拉下来了，那Toolbar上面的空白该显示什么？所以Toolbar的上部边缘是不可以往下拉的，只有下部边缘才能往下拉，这样的视觉效果好比Toolbar如电影幕布一般缓缓向下展开。不过，Android在实现展开效果的时候，并非直接让Toolbar展开或收缩，而是另外提供了CollapsingToolbarLayout，通过该布局包裹Toolbar，从而控制标题栏的展开和收缩行为。下面是CollapsingToolbarLayout的属性说明： app:contentScrim : 指定布局内部未展开时的背景颜色。 app:collapsedTitleTextAppearance : 指定未展开时的标题文字字体。 app:collapsedTitleTextColor : 指定未展开时的标题文字颜色。 app:collapsedTitleGravity : 指定未展开时的标题文字对齐方式。 app:expandedTitleTextAppearance : 指定展开后的标题文字字体。 app:expandedTitleTextColor : 指定展开后的标题文字颜色。 app:expandedTitleGravity : 指定展开后的标题文字对齐方式。 app:expandedTitleMargin : 指定展开后的标题四周间距。 app:expandedTitleMarginStart/app:expandedTitleMarginTop/app:expandedTitleMarginEnd/app:expandedTitleMarginBottom : 指定展开后的标题具体方向的间距。上述属性在代码中的设置方法如下所示： setContentScrim/setContentScrimColor/setContentScrimResource : 设置布局内部未展开时的背景颜色。 setCollapsedTitleTextAppearance : 设置未展开时的标题文字字体。 setCollapsedTitleTextColor : 设置未展开时的标题文字颜色。 setCollapsedTitleGravity : 设置未展开时的标题文字对齐方式。 setExpandedTitleTextAppearance : 设置展开后的标题文字字体。 setExpandedTitleColor : 设置展开后的标题文字颜色。 setExpandedTitleGravity : 设置展开后的标题文字对齐方式。 setExpandedTitleMargin : 设置展开后的标题四周间距。 setExpandedTitleMarginStart/setExpandedTitleMarginTop/setExpandedTitleMarginEnd/setExpandedTitleMarginBottom : 设置展开后的标题具体方向的间距。在工程中使用CollapsingToolbarLayout，则需注意以下几点： 1、添加几个库的支持，包括appcompat-v7库（Toolbar需要）、design库（CollapsingToolbarLayout需要）、recyclerview库（主页面的RecyclerView需要）； 2、布局文件的根布局采用android.support.design.widget.CoordinatorLayout，因为design库的动态效果都依赖于该控件； 3、CoordinatorLayout节点要添加命名空间声明xmlns:app="http://schemas.android.com/apk/res-auto"； 4、使用android.support.design.widget.AppBarLayout节点包裹android.support.design.widget.CollapsingToolbarLayout节点，再在CollapsingToolbarLayout节点下添加Toobar； 5、Toobar节点添加滚动属性app:layout_scrollFlags="scroll|enterAlways"，声明工具栏的滚动行为标志；其实真正运行的时候，Toolbar的高度是固定不变的，变化高度的是CollapsingToolbarLayout。只是许多App把这两者的背景设为一样的，所以看起来像是统一的标题栏在收缩和展开。既然二者原本不是一家，那么就得有新的属性用于区分它们内部的行为，新属性在Collaps

03

Android 内存分析工具

Dalvik 虚拟机支持垃圾收集，但是这不意味着你可以不用关心内存管理。你应该格外注意移动设备的内存使用，手机和平板的内存空间是受到限制的。

02

【Android】5.x炫酷标题栏动画使用理解

Android5.0+推出的新控件感觉特别酷，最近想模仿大神做个看图App出来，所以先把这些新控件用熟悉了。新控件的介绍、使用等等网上相应的文章已经特别多了，题主也没那能力去写篇详解出来，本篇随笔记录的主要是题主学习这些新控件时遇见的一些困惑以及在搞了半天后的一丝理解，或许也有新手也会碰到跟我一样的困惑，相互学习哈，如果有哪个地方理解错了，还望告知。

06

腾讯开源超实用的UI轮子库，我是轮子搬运工

只需要修改一份配置表就可以调整 App 的全局样式，包括组件颜色、导航栏、对话框、列表等。一处修改，全局生效。

03

AppBarLayout和CollapsingToolbarLayout的闲谈

自从google的design出来之后，很多控件效果实现起来已经不需要再像以前那样写自定义控件了，最近有个需求是要到页面头部标题栏的折叠效果，因此，想想用CollapsingToolbarLayout

03

python GUI库图形界面开发之PyQt5中QMainWindow, QWidget以及QDialog的区别和选择

QMainWindow类提供一个有菜单条、锚接窗口（例如工具条）和一个状态条的主应用程序窗口。

01

安卓入门-第三章-安卓常用控件的使用方式

TextView可以说是Android中最简单的一个控件了，你在前面其实已经和它打过一些交道了。它主要用于在界面上显示一段文本信息，比如你在第1章看到的“Hello world！”。下面我们就来看一看关于TextView的更多用法。

02

像折纸一样操作多屏手机

韩国电子巨头三星公司还没推出曲面显示屏智能手机Galaxy Round和LG推出G Flex很久之前，加拿大皇后大学人类媒体实验室的团队就研发出Paperphone(纸张电话)全功能可弯折智能手机的原

07

iOS14开发-菜单

iPhone 11 之前，有一种主屏交互方式称之为 3D Touch，现在已经改为 Haptic Touch。它是一种立体触控技术，可感应不同的触控压力。通过该技术可以给 App 设置最多 4 个不同的 ShortcutItem（快捷操作菜单），实现方式分为静态和动态两种。

02

六天完成一个简单iOS App - 第五天

第五天任务今天主要完成精华页面中cell内内容的处理。 cell高度的计算 cell中间内容的显示精华模块的重构查看图片保存图片到相册 cell高度的计算 cell间距的设置，每个cell之间有10的间距，因为cell的重用机制，我们发现即使在tableView :didDeselectRowAtIndexPath方法中通过点击cell，减少cell的高度，当cell重新显示的时候还是会变回原来的高度，并且系统内部对cell进行了一些处理，已经在内部设置好cell的frame，所以我们通过重写cel

06

熟悉Android Studio界面，开始装逼卖萌

通过前两期的学习，我们可以正确搭建好Android Studio的开发环境，也创建了HelloWorld工程并成功运行，那么本期就带你一起来了解这款强大的IDE开发工具吧。一、Android Stu

06

【翻译】MotionLayout实现折叠工具栏（Part 2）

2018-08-27 by Liuqingwen | Tags: Android 翻译 | Hits

03

UI篇－UITabBar及其相关其他知识

和UINavigationController类似,UITabBarController也可以轻松地管理多个控制器,轻松完成控制器之间的切换。

02

Mac 下升级 vim 并自己配置 vim 的过程

1.升级 vim　　我自己 MacBook Pro 的系统还是 10.11 ，其自带的 vim 版本为 7.3 ，我们将其升至最新版：使用 homebrew ： brew install vim --with-lua --with-override-system-vim 这将下载最新的 vim 版本并替换系统自带的 vim 。安装完成后重启终端，更新环境变量，输入 vim 后 vim 的版本便为最新版本了。如果以后想更新 vim 版本，直接输入 brew upgrade vim 便能快速升级了。想

07

Android开发笔记（一百）折叠式列表

经常看朋友圈的动态，有的动态内容较多就只展示前面一段，如果用户想看完整的再点击展开，这样整个页面的动态列表比较均衡，不会出现个别动态占用大片屏幕的情况。同样，查看博客的文章列表也类似，只展示文章开头几行内容，有需要再点击加载全篇文章。动态列表直接使用ListView，动态内容就得自己写个控件了，自定义控件的难点在于如何把握动态下拉和收起的动画。这里我们要先预习TextView的相关函数，下面是本文用到的方法说明： getHeight : 获取TextView的显示高度。 setHeight : 设置TextView的显示高度。 getLineHeight : 获取每行文本的高度。 getLineCount : 获取所有文本的行数。如果一开始每条动态默认显示四行，那么默认显示高度是getLineHeight*4，使用setHeight方法即可设置动态的初始显示高度。点击展开动态全文时，就得显示所有行的文本，整个文本的高度是getLineHeight*getLineCount。现在有了每条动态的初始高度，以及动态全文的完整高度，再加个拉伸动画就差不多了。拉伸动画的主要工作是随着时间的推移，给TextView设置渐增或渐减的高度，这要重写Animation的applyTransformation方法。下面是点击监听器的显示动画代码示例：

04

Android魔术系列：一步步实现滑动折叠列表

这个效果是多年前做电商的时候的一个需求，当时是模仿一个叫喵街的app（也不知道现在还在不在了），实现后效果如下：

01

细说 AppbarLayout,如何理解可折叠 Toolbar 的定制

Material Design 是个好东西，它的出现使得 Android 也能定制高颜值的界面，并且指导了如果实现复杂炫丽的交互效果，而 Android Surpport Desgin 这个支持包就是 Android 官方对 Material Design 的代码实现。

03

知识整理之CSS篇

CSS篇主要从CSS兼容、CSS3新特性、CSS选择器、高频属性、高频布局、高频知识点、性能优化等方面进行归纳。如对HTML知识点感兴趣，可移步至：知识整理之HTML篇

02

Bootstrap响应式前端框架笔记二十——工具条的应用

工具条用于向用户进行某个操作的提示，在Bootstrap框架中，为按钮添加工具条十分简单，只需如下代码：

02

Debug

其实看一个会写程序的人功力怎么样,我觉得看ta的键盘F10,F11就能知道,如果磨得没有字了,或者油腻腻的(别问我为什么是油腻腻的这个形容词).因为程序写好运行的时候,就像一个个小工厂一样.有条不紊的全力运行,某种意义是打断就不没了,因为动起来本身就是一种生命力.上个月看一本讲操作系统的书,里面有个大佬说,操作系统一旦动起来连它的设计者都搞不清它内部在时空上每一刻的详细状态(大致意思就是这样,我也没记).

02

Appium元素定位方式

控件的基础知识和selenium一样，appium为移动端抽象出了一个控件模型，称为dom结构；会把所有的控件都理解为xml文件，在xml文件里，每个控件都有自己的类型和属性；

01

（翻译）LearnVSXNow! #13- VS IDE中的菜单和命令

几乎所有的VSPackage都有用户交互，用户可以通过点击Visual Studio中的菜单或工具栏来激活VSPackage的功能或显示相关的界面。

03

App自动化测试|dom结构和元素定位方式

控件的基础知识和selenium一样，appium为移动端抽象出了一个控件模型，称为dom结构；会把所有的控件都理解为xml文件，在xml文件里，每个控件都有自己的类型和属性；

04

App自动化之dom结构和元素定位方式（包含滑动列表定位）

控件的基础知识和selenium一样，appium为移动端抽象出了一个控件模型，称为dom结构；会把所有的控件都理解为xml文件，在xml文件里，每个控件都有自己的类型和属性；

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭