开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在滚动到div的原始位置时，将div的位置从固定位置切换到最底部，再切换到初始位置

，可以通过以下步骤实现：

首先，需要监听滚动事件，以便在滚动到指定位置时触发相应的操作。可以使用JavaScript来实现这一功能。
在滚动事件的回调函数中，可以通过获取div元素的位置信息来判断是否滚动到了原始位置。可以使用JavaScript的DOM操作方法，如getElementById()来获取div元素。
当滚动到原始位置时，可以通过修改div元素的CSS样式来改变其位置。可以使用JavaScript的style属性来修改CSS样式，将div的position属性设置为"fixed"，将其bottom属性设置为0，即将div固定在页面底部。
当滚动到最底部时，可以通过同样的方式将div的位置切换回初始位置。将div的position属性设置为"static"，将其bottom属性设置为"auto"，即将div恢复到初始位置。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
#myDiv {
  width: 200px;
  height: 200px;
  background-color: yellow;
  position: static;
  bottom: auto;
}
</style>
</head>
<body>

<div id="myDiv">This is a div element.</div>

<script>
window.addEventListener('scroll', function() {
  var div = document.getElementById('myDiv');
  var rect = div.getBoundingClientRect();
  var originalPosition = rect.top; // 获取div的原始位置

  if (window.pageYOffset >= originalPosition) {
    div.style.position = 'fixed';
    div.style.bottom = '0';
  } else {
    div.style.position = 'static';
    div.style.bottom = 'auto';
  }
});
</script>

</body>
</html>

这段代码会在滚动到div的原始位置时，将div的位置从固定位置切换到最底部，再切换到初始位置。你可以将其复制到一个HTML文件中，然后在浏览器中打开该文件，进行测试。

相关搜索:将固定位置的div滚动到其底部，然后停止当我将CSS div元素中的锚标记的位置从div内部移动到div外部时，它会变得拥挤我的"div“是从顶部移动到底部(即从顶部起200px的高度)，然后固定在顶部(开始位置)。但是我想修复一个bottom.How，我能做到吗？linux中nm命令 linux字符串换行 linux 停掉进程 linux 驱动鼠标 linux 更新证书 linux入门的书籍 linux后门有哪些

相关搜索:

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

有帮助

没帮助

相关·内容

移动端吸顶fixbar解决方案

在IOS端，使用 position： sticky 这个属性，使用类似于 position: relative 和 position: absolute 的结合体。在目标区域在屏幕中可见时，它的行为就像position:relative; 而当页面滚动超出目标区域时，它的表现就像position:fixed，它会固定在目标位置。

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

纯CSS实现吸附效果

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

02

js点击按钮返回页面顶部

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

01

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

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

04

uni-app中使用scroll-view滚到底部时多次触发scrolltolower

前段时间使用scroll-view可滚动视图区域容器来做多个不同内容的展示（在我这个页面中同时使用了三个scroll-view做数据展示），因为这几个展示的内容的数据都比较的多，因此为了页面的数据加载顺畅决定使用上拉加载（简单的说就是数据分页显示）。

01

微信小程序示例 - 视图容器

滑块视图容器 swiper 代码结构 <swiper> <swiper-item> <image src="{{item}}"/> </swiper-item> .

08

H5C3第四节

CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩性，在响应式开中可以发挥极大的作用。

03

「大众点评点餐」小程序开发经验 03：事件联动

李超，美团点评前端开发工程师，2 年 web 开发经验，现在是美团点评点餐团队的一员。

04

基于 Vue 的两层吸顶踩坑总结

近日，在做活动页的过程中遇到两层吸顶的需求，并且要兼容 IE9 及以上的浏览器。乍一看不就是个吸顶嘛，应该不难吧，事实证明还是踩了很多坑才出来。兼容性问题多到吐血，我太难了。废话不多说，先看一下两层吸顶的最终实现效果，如下图所示。

01

基于 Vue 的两层吸顶踩坑总结

近日，在做活动页的过程中遇到两层吸顶的需求，并且要兼容 IE9 及以上的浏览器。乍一看不就是个吸顶嘛，应该不难吧，事实证明还是踩了很多坑才出来。兼容性问题多到吐血，我太难了。废话不多说，先看一下两层吸顶的最终实现效果，如下图所示。

02

Chrome开发者工具不完全指南（一、基础功能篇）

http://www.cnblogs.com/constantince/p/4565261.html

02

自实现PC端jQuery版轮播图

最近其他项目不是很忙，被安排给公司的官网项目做一个新的页面（之前没接触公司官网项目），其中有一个用到轮播图的地方，最开始想直接用swiper.js插件实现就好了，可是发现官网项目里之前都没有引入过swiper.js，后来想了想，就不引入它了，免得又得增加依次一次网络请求，项目里既然已经用到了jQuery，那就索性用jQuery写一个轮播图吧。

02

自己实现PC端jQuery版轮播图

最近其他项目不是很忙，被安排给公司的官网项目做一个新的页面（之前没接触公司官网项目），其中有一个用到轮播图的地方，最开始想直接用swiper.js插件实现就好了，可是发现官网项目里之前都没有引入过swiper.js，后来想了想，就不引入它了，免得又得增加依次一次网络请求，项目里既然已经用到了jQuery，那就索性用jQuery写一个轮播图吧。

CSS 定位详解

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

04

不会玩阴阳师的我带你一键下载《阴阳师：百闻牌》所有卡牌并调用百度OCR识别文字信息

一天，一个朋友给我发来一条链接https://ssr.163.com/cardmaker/#/，让我帮他看看怎么能获取到网页中所有的图片链接。我打开链接一看，页面的标题是阴阳师:百闻牌，下面有选择栏，再下边就是各种奇奇怪怪的看不懂的图片，我就问他这是什么呀？他说是一个游戏阴阳师里边的卡牌。怪不得我没听过，因为我不玩游戏，一个准程序猿不玩游戏一定有很多人不相信，但是确实如此，我从未玩过游戏。但是这并不影响我来分析网页得到图片，网页如下：

02

自实现PC端jQuery版轮播图

最近其他项目不是很忙，被安排给公司的官网项目做一个新的页面（之前没接触公司官网项目），其中有一个用到轮播图的地方，最开始想直接用swiper.js插件实现就好了，可是发现官网项目里之前都没有引入过swiper.js，后来想了想，就不引入它了，免得又得增加依次一次网络请求，项目里既然已经用到了jQuery，那就索性用jQuery写一个轮播图吧。现在把自己写的轮播图这块代码单独拿出来，做一个小demo写在这里记录一下（demo中轮播图的图片网上随意找的）实现的效果：　　　　1、自动轮播（轮播时间间

07

利用"交叉观察者"这个小宝贝儿，轻松实现懒加载、吸顶、触底

IntersectionObserver接口，提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法，祖先元素与视窗(viewport)被称为根(root);

02

利用"交叉观察者"这个小宝贝儿，轻松实现懒加载、吸顶、触底

IntersectionObserver接口，提供了一种异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法，祖先元素与视窗(viewport)被称为根(root);

04

基于iframe的移动端嵌套

需求描述上上周接到了新的项目，移动端需要做一个底部有五个导航，点击不同的导航页面主体显示不同的页面，其中两个页面是自己做，而另外三个页面是引用另外三个网址，其中两个网址为内部项目，另外一个为外部（涉及跨域）。问题考虑再三后最省时间成本的就是使用iframe，虽然在移动端使用，我的内心是很拒绝的，不过其他方案调研了下都不太符合现状。每点击一次加载一个新的iframe，比较懒，所以两个新页面也做成了iframe，在做的过程中出现了如下问题，这里总结一下： 1.嵌入的iframe页面无法滚动 2.met

06

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭