js固定顶部_js 固定顶部_js顶部固定 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

Js如何实现当网页超过一屏时导航菜单始终置顶-吸顶盒效果

我们平时在逛一些电商网站时,无论是首页还是详情页,通常会有一个导航菜单石红跟随着页面,无论是页面滚动到中间还是底部

05

python测试开发django-136.Bootstrap 顶部导航navbar

页面顶部导航可以固定在屏幕顶部，不用随着页面上下拖动而滚动。 Bootstrap 框架可以用 .navbar 快速实现这种页面效果

02

您找到你想要的搜索结果了吗？

是的

没有找到

神奇的position:sticky

position:sticky定义， eg:CSS中position属性介绍(新增sticky)

02

滚动穿透的6种解决方案【已自测】

在移动端中，如果我们使用了一个固定定位的遮罩层，且其下方的dom结构的宽度|高度超出屏幕的宽度|高度，那么即使遮罩层弹出后铺满了整个屏幕，其下方的dom结构依然可以滚动，这就是大家所说的“滚动穿透”。

03

【JavaScript】给你的网站加一个简单的返回顶部

工具:灵巧的小手要实现的功能分别为: 1.当滑动到一定位置，返回顶部按钮的显示与消失。(用if判断) 2.点击返回顶部按钮，返回到顶部。(使用window.scroll(0,0))

01

表格头部固定和表格列固定

我不是前端大神，只是偶尔在开发系统时，需要用到表格。如果表格只需要单独的用来展现数据，那就很简单了，那如果需要实现复杂的样式呢？比如说表头固定，当网页滚动的时候，表头自动固定到网页顶部，这样很客观的展现了每列的内容。

02

关于页面滚动的两个 CSS 属性

一般返回顶部都是直接用 JS 实现的，但是我不懂 JS ，写个 console.log 我都不会就不用说写返回顶部了。那就直接用回最原始的方法：锚点定位。锚点定位其实很好用，但主要是太生硬了，点一下定位就瞬间冲过去了，没有任何过渡。很多人用JS来做返回顶部而不用 CSS 可能就是锚点定位的这个缺点。

02

为WordPress主题添加页面加载进度条

pace.js是一个非常赞的JavaScript插件，可以实时监听页面的数据加载，包括Ajax请求，显示页面加载进度，并且能够定制样式，类似浏览器加载进度条，比如Safari。

02

纯CSS实现吸附效果

「吸附效果」就是网页滚到到某个位置，元素固定在该位置，后续不随网页滚动而滚动。吸附效果很常见，譬如吸顶效果和吸底效果，经常用在跟随导航、移动广告和悬浮提示等场景中。

02

js点击按钮返回页面顶部

在进行官网一类的网站建设时，经常会出现页面太长的现象，当用户滚动滚动条到最底部时返回顶部需要滚动多下滚动条，用户体验相当不好，于是就出现了当滚动条滚动到一定位置后出现返回顶部按钮，点击该按钮返回顶部，并且有一定的效果。

01

jQuery scroll()方法：页面滚动到一定位置触发事件返回顶部

在日常工作中难免会遇到一些滚动事件的应用，页面滚动到一定位置显示返回顶部按钮，header 头部 fixed 固定等，这时候就可以使用 scroll() 方法来实现我们的需求。

03

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

演示效果自带引用bug.png 把Dn()函数注释掉即可.png 安装 npm install vue-fullpage.js 引用 // 引用fullpage 插件 import 'fullpage.js/vendors/scrolloverflow'; import VueFullPage from 'vue-fullpage.js'; Vue.use(VueFullPage); 在组件中使用 <full-page :options="options" ref="page">

03

数据工厂平台11：首页收尾

接着来做这个首页的收尾部分。按照上节课的结尾,我们需要进行新导入组件的三个本地化配置。

02

页面中元素的吸顶

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情 >>

03

JS实现导航栏下滑悬浮透明置顶

如果仅仅想把导航栏固定，添加以下属性即可： style="position: sticky;" 注：前提是你已经写好了导航栏。如果想将导航栏下滑悬浮透明，请参照如下方式：给 header盒子(整个导航的盒子)添加 id="headerTop" 并添加以下css样式： #headerTop{ /*使导航栏固定在顶部*/ position: fixed; top:0; left: 0px; z-index: 1000; /*一开始就不给导航栏设置背景色*/

01

使用 position:sticky 实现粘性布局

如果问，CSS 中 position 属性的取值有几个？大部分人的回答是，大概是下面这几个吧？ { position: static; position: relative; position: absolute; position: fixed; } 额，其实，我们还可以有这 3 个取值： { /* 全局值 */ position: inherit; position: initial; position: unset; } 没了吗？偶然发

04

摇一摇面包机

1项目背景项目需求：要制作一个面包机，面包机不断往上滚动层板，层板上有很多个面包，而只要用户摇手机，就会随机掉下来一些面包。用户不断摇，面包不断掉，而面包机不断生产面包，不断往上滚动补充面包。 2实现思路为了得到更好的性能，选择在关键的动画上都使用css3而不使用javascript，最终的思路非常简单： 1）有4个层板（DIV），他们重复着向上移动的动画。 2）每个层板上有3个面包，当其中如果有面包需要掉落时，隐藏该面包，并同时增加一个专门用来掉的面包，然后开始让它执行掉的动作。 3）层板移动到

01

CSS 定位详解

CSS 有两个最重要的基本属性，前端开发必须掌握：display 和 position。

01

HTML网页引用公共的头部和底部（亲测有效的三种方法）

注意：方法二和方法三必须设置宽和高，高必须固定，设置auto会出现页面显示不完整的情况。（亲测方法三会出现滚动条）

01

微信小程序转发朋友圈详解

这个功能目前只支持Android(在IOS高版本微信支持朋友圈打开小程序能力，但不能分享)。

02

CSS固定定位与粘性定位4大企业级案例

前面两篇文章为大家详细讲解了相对定位与绝对定位的应用场景和案例。如果想了解的可以在公众号里面查看去看。本小节我们学习下固定定位与粘性定位的应用场景和案例。

03

iframe HTML5视频全屏播放问题

背景：我采用了videojs视频播放器。视频播放页面是一个独立页面包含了html5播放器代码。主页面采用iframe 调用视频播放页面。

03

webAPP页面切换之滑动-swiper2(切换页面默认显示顶部)

最近做一个web页面，希望在手机上能滑动切换页面，第一次这种要求，在网上找到了一个插件swiper,swiper2可以在电脑和手机上使用，于是选择这个插件，在使用这个插件的过程也遇到了很多问题，如滚动条很长，体验不好，最后采用js来控制高度，在此页面中也采用了bootstrap-table插件来固定表头，采用js动态的设置高度，当页面高度小时，有滚动条，页面高时就完全展示，为了体验好，当滚动到第一个页面底部时，滑动切换第二个页面的顶部，需要scrollTop实现

02

小程序顶部导航栏，可滑动，可动态选中放大

代码里注释很明白了，大家自己跟着多敲几遍就可以了。后面会更新更多小程序相关的知识，请持续关注。

04

页面中元素的锚点定位

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第12天，点击查看活动详情 >>

07

ZblogPHP模版导航栏跟随效果

一直很喜欢导航栏下拉时跟随的效果，今天没事研究了一会，百度了一下，找到几处教程，但是还是“天兴工作室”的教程简单，所以综合一下，基本上实现了此功能，把过程下载来以备不时之需。

02

JS 吸顶导航，告别“回到顶部”

当我们浏览页面篇幅较大，浏览过半的时候想回到导航位置，只能通过往回滚动或通过”回到顶部”重新滚动到导航位置，这样的操作显得繁琐与不便。于是便有了吸顶式导航的交互方式，吸顶条导航最大的好处是将最常用或者设计者最愿意让用户看到的内容、功能经常保持在用户面前，为用户提供了极大的便利与交互体验。本文主要内容 1、吸顶导航是什么 2、吸顶导航的实现方法 3、小结 1、吸顶条导航是什么如图：吸顶导航栏的初始位置一般是靠近在页面的顶部位置，但是又存在一定距离，通常这块区域放置最为醒目或者重要元素的地方，如

07

前端成神之路-定位

标准流在最底层 (海底) ------- 浮动的盒子在中间层 (海面) ------- 定位的盒子在最上层（天空）

02

动手练一练，手写一个价格对比、固定表头滚动的表格

大家好，今天我们将一起实践下如何手写固定表头，那么什么是固定表头呢？就类似 Excel 表格有个锁定表头的功能，方便用户查阅数据进行数据项的对比。虽然有不少相关插件提供了类似的功能，比如 ScrollMagic.js，但是今天的实例，我们将用纯原生的方式进行实现，当滚动条滚动至表格位置，固定表头位置，表格内容查看完后，取消固定表头的功能。

03

页面返回顶部代码_网页回到顶部代码

1 使用文字添加方法最简单的是：最简单的“返回顶部”代码就是“返回顶部”（不包括引号），(0,0)代表座标，第一位是水平，第二位是垂直，(0,0)就表示网页左上角，文字部分（返回顶部）可以自由替换成自己需要的内容，比如也可以用“TOP”都可以。

04

Js处理滚动条和日期框

driver.find_element_by_xpath("").get_attribute(属性名称)

01

js如何实现阅读完协议后才可以注册

http://mpvideo.qpic.cn/0bc3t4ajoaaa4qap3dc6vfrvbh6ds6pqbfya.f10002.mp4?dis_k=5570fd8d7cd015ab38fa84b

03

小程序 - 效果处理之技巧合集(更新中...)

巧用Console.log(event) Event::事件对象，方法在执行的时候，当前环境携带的一些信息可以打印出来、获取很多信息，根据这些信息再度寻找你需要的信息的路径。如小程序里的event.detail.width;;;; 页面加载后切换一次类名，实现初始页动画展示、初始页切换类名、配合一次性定时器切换类名 1 onLoad: function (options) { 2 3 setTimeout(()=>{ 4 5 this.setData({ a: 'a-class

09

JavaScript笔记(21)

今天继续做案例,昨天就看了三集...想要看完真是遥遥无期,我真的太懒了...间歇性踌躇满志,持续性懒惰,达咩!!!

01

吸顶效果解决方案

吸顶元素的初始位置一般靠近页面顶部，但与顶部有一定距离，这块区域放的是最醒目的元素，比如Banner图。页面向下滚动超过吸顶元素初始位置时，把吸顶元素固定在顶部

01

仿腾讯课堂固定滚动列表ReactNative组件

前言由于业务需要做成类似腾讯课堂课程详情滚动的效果，考虑到后面有可能有新的呈现方式，RN提供的组件没有这种滚动控件，不如自己封装，其实去年已经写了一篇但是写的比较乱，周末花了点时间重写梳理下做的东西

07

Android WebView实现网页滚动截图

注意若Web页面存在position:fixed; 的话得在调用前设置为 position:absolute; 哦，否则会出现很多次的，请看下面的具体解说吧！！

01

膜拜！用最少的代码却实现了最牛逼的滚动动画！

ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。

00

膜拜！用最少的代码却实现了最牛逼的滚动动画！

ScrollTrigger是基于GSAP实现的一款高性能页面滚动触发HTML元素动画的插件。

02

七天速成小程序——喜马拉雅

很多新手都喜欢一个人完成项目，从项目的规划、搭建，到实施、debug、验收，一整套流程都是自己纯手完成，当然，对于提高自己的整体开发能力和自适应能力很有帮助。ok,不废话，下面开始介绍小白如何快速完成一个微信小程序。

02

ZendFrameWork组件Layout学习笔记

试图助手可以理解成为控制页面布局，按照这个顺序进行页面的渲染 $this->headLink() 只是生成link标记占位符，例如 <?php echo $this->headLink()->app

07

zblogPHP万能型主题模板希望（Hopelee）全新绽放，独具热爱，自成一派

HI又发布新主题了，这半年过的实属不易，如人饮水，冷暖自知啊，人类的悲喜并不相通，悲喜自渡是我们一生的必修课，无论怎样我们始终要相信人生总会有不期而遇的温暖和生生不息的希望！所以我们新款主题的名称就是“希望”，有了希望就有奔头，我遵循的是1+1=N的风格，可能这也是很多人说我的主题模板风格很相似的原因吧。不管怎样，喜欢就好，毕竟追求源于热爱。先介绍下大家比较关心的几个问题，首先需要安装zblogPHP版本（一般来说安装最新版即可），不会安装的查看此地址：zblog安装图文教程，附zblog主题下载及使用教程，程序安装完成之后，需要下载和开启主题，如果您是在应用中心购买的，可以忽略前半部分，直接查看主题设置内容接口。

03

adminLte解决iframe高度问题

adminLte默认是全局刷新，也就是不存在frame页面，经过修改，可以很容易实现右边内容框用frame实现页面刷新，这样就不需要整个页面全局刷新，点击相应菜单时，只会刷新frame窗口，但是有一个问题就是frame默认高度只有一丁点，百度之后用了自适应也会有各种问题，比如高度只能拉伸不会缩短，在解决的道路上真的是没有一个完美的解决方案，经过自己研究，发现一个非常简单的方法，那就是用js获取window的innerHeight，代码实现window.innerHeight，然后出去顶部的状态栏，以及空白部分，经过测试，窗口高度减去90是最合适的，也可以根据你自己的情况加减，最后调至一个最完美高度，发现任何分辨率都不会有问题！

03

昨天全国哀悼日，全站变灰，我们都这么做

原文链接：https://juejin.im/post/5e86e221e51d4546ce27b99c

02

微信小程序中实现吸顶效果(流畅、不卡顿)

最开始的时候，在小程序中实现吸顶效果，开发工具看起来还挺好的，但是在真机上就会有问题了。原因是我不停的去 setData 会导致操作反馈延迟严重，无法及时将操作处理结果及时传递到视图层。 📷 后面就对代码进行了调整，避免不停的去setData 效果图吸顶前 📷 吸顶后 📷 代码部分 wxml <view style="width: 90%; height: 300rpx; background: #f0f0f0; margin: 30rpx auto;"></view> <view style="wi

03

分享 10 个常见的 CSS 页面布局代码片段

大家好，本篇文章将分享我们业务中很常见的10个页面布局代码片段，这10 种页面布局很常见，实现方式也有很多种，本篇文章将用最简单的新方式进行实现，希望对大家有所启发。

05

小程序开发基础-scroll-view 可滚动视图区域

查看官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/

04

微信小程序转发、分享、预览

之前做过的微信小程序项目，则涉及到很多转发分享的功能，例如页面的分享-到朋友圈-好友，文件（图片 doc pdf ）的分享给好友等等，开发中用到的api方法和遇到的问题，今天在这里统一总结记录下。

04

本博客的主题 Tony 开源并开放下载

Gayhub https://github.com/HelipengTony/tony 环境要求 WordPress 4.4+ WordPress REST API 非默认固定链接格式(推荐使用/%post_id%) WordPress 伪静态安装指南 git clone git@github.com:HelipengTony/tony.git WordPress 后台「主题」栏目 -> 上传主题 -> 启用主题 WordPress Themes 文件夹新建文件夹，并上传所有文件反馈交♂流 QQ 群：4

01

QQ空间缓存图片_QQ空间原图

不知各位遇到特别长的图片时是怎么处理的？是截取符合长宽的部分做临时展示？还是硬要长宽100%模糊（啥也看不清）展示？还是先拿一个压缩的图片做占位，在鼠标移入或点击时放大预览？

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭