个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在尝试创建一个 div“floater”，它的行为类似于一个固定的 div(无论滚动如何卡在一个特定的位置)，但是当它到达它所在的 div 的边界时，它就会停止固定。
当滚动条在顶部时，它应该将 div 放置在包含的 div 中的 0 处(例如距离顶部 100 像素)，当滚动条到达底部时，它应该防止 float 项超出容器. float 的高度是静态的，但容器的高度是动态的。
我到处都看到过这种类型，但不知道如何为它找到一个好的例子。
我想尽可能避免使用 jQuery，因为我想它应该只需要一些简单的 JavaScript 来确定相对于它所在的 div 的当前位置。
谢谢。
最佳答案
好的伙计们，这是一个完整的解决方案。我只在 Firefox 和 IE 中对此进行了测试，但它应该可以全面工作(我认为)。这是直接的 JavaScript，未使用 jQuery。第一个 JS 函数确保返回的高度适用于各种浏览器。
编辑 - 我对此进行了改进，见下文。
<html>
<head>
<style type="text/css">
* {margin:0;padding:0;}
#header {height:300px;width:100%;background:#888;}
#main {height:800px;width:70%;background:#eee;float:left;}
#side {width:30%;height:auto;background:#ddd;float:left;position:relative;}
#floater {height:400px;width:90%;background:#dcd;top:0px;position:absolute;}
#footer {height:300px;width:100%;background:#888;clear:both;}
</style>
<script>
function getPageY() {
var height = 0;
if(typeof(window.pageYOffset) == 'number') {
height = window.pageYOffset;
}
else if(document.body && document.body.scrollTop) {
height = document.body.scrollTop;
}
else if(document.documentElement && document.documentElement.scrollTop) {
height = document.documentElement.scrollTop;
}
return height;
}
onload=function() {
window.onscroll = scroll;
function scroll() {
ybox.value = "this: "+getPageY();
var f = document.getElementById("floater");
var y = getPageY()-300; // minus header height
var divh = document.getElementById("main").offsetHeight;
if (divh > 400) { // greater than floater height
divh -= 400; // minus floater height
if (y < 0) y = 0;
else if (y > divh) y = divh;
f.style.top = y+"px";
}
}
}
</script>
</head>
<body>
<div id="header"></div>
<div id="main"></div>
<div id="side"><div id="floater">Float Content<br />
<input name="ybox" id="ybox"></div></div>
<div id="footer"></div>
</body>
</html>
这是有效的，但是对于图像来说它非常不稳定。当它应该卡在某个位置时，我将其修改为使用固定位置。用这个替换三个匹配的行以获得更平滑的结果:
if (y < 0) {y = 0;f.style.position = "absolute";}
else if (y > divh) {y = divh;f.style.position = "absolute";f.style.top = divh+"px";}
else {f.style.position = "fixed";f.style.top = 0;}
关于javascript - 创建一个位于 div 内的 float 框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5454821/
25
4
0
我正在使用 javascript 并有以下类: const Product = require('../models').Product class ProductService { cons
我正在开发一个简单的应用程序，宠物用户可以在其中创建关于他们宠物的板并在板上显示图片。 我正在尝试创建一个功能，用户可以点击他们的图板，将他们重定向到他们的图板，该图板将显示他们所有的宠物图片。 当我
我有这样的事情:循环遍历 ids，并对每个 ids 向服务器(同一域)发出 ajax 请求 (async:true) 并将接收到的数据附加到 DOM 元素。这不是一项艰巨的任务，它确实有效。示例代码:
我正在尝试使用 Pillow 在我的网络应用程序中添加用户可上传的图像。我创建了一个 Django Upload 模型并将其注册到 Admin 中。当我使用管理控制台添加照片后，我收到以下错误。最初该
已关闭。这个问题是 not reproducible or was caused by typos 。目前不接受答案。 这个问题是由拼写错误或无法再重现的问题引起的。虽然类似的问题可能是 on-top
说到 UINavigationBar 时我有点困惑。我以编程方式设置它，它的作用是将我的 viewController 向下推(因此在启动应用程序后看不到 Storyboard中看到的 View 底部
我有以下查询，它可以满足我的要求，并显示从出生日期转换而来的人们的年龄。但我现在想通过说大于或小于这些年龄来缩小结果范围，但我不知道该怎么做。 SELECT u.`id` as `user_id`
我有一个 ListView (不是 recyclerView)，其中每一行都有一个按钮、几个 TextView 和一个 EditText。单击特定按钮(“editTremp”)后，我希望 EditTe
我的 cellAtIndexPath 中有一个查询。正如常见的那样，此查询从单元格行索引处的数组中获取对象。我想知道每次加载 tableView 时是否只有一个查询，还是将其算作每个 indexPat
我目前正在探索 http://www.ecovivo.be/rubriek/food 上使用的模板中的错误. 问题:访问该链接时，您会注意到右侧有一个带有内容的大型 float 图像。现在一切正常。但
我在 ViewController 之间通过引用传递特定模型的数组。 如果我更改数组中特定元素的任何值，它会在所有 ViewController 中很好地反射(reflect)，但是当我从该数组中删除
svg 包含更多元素，其中之一是下拉选择器。我遇到的问题是选择器只能在其顶部边缘被点击，而不能在选择器的其他任何地方被点击。 选择器称为 yp-date-range-selector。在下一张图片中，
我的元素使用 20 行 20 列的 css 网格布局(每个单元格占屏幕的 5%)。其中一个页面有一个按钮。最初该页面包含在网格第 5-8 列和网格第 6-9 行中，按钮本身没有问题，但我需要将其居中放
我想使用 CSS Trick 使图像居中.但是如果图像大小是随机的(不固定的)怎么办。令人惊讶的是，我不想保持图像响应，我想在不改变其宽度或高度(实际像素)的情况下将图像置于中心。 下面是我的代码:
我正在尝试在网址之间进行路由。产品是一个类: from django.db import models from django.urls import reverse # Create your mo
我正在通过查看 Django 教程来制作网站。我收到一个错误: NoReverseMatch at /polls/ Reverse for 'index' with no arguments not
我一直在试用 Django 教程 Django Tutorial Page 3并遇到了这个错误 "TemplateDoesNotExist at /polls/ " . 我假设问题出在我的代码指向模板
我有一个应用程序，其中大部分图像资源都存储在单独的资源包中(这样做是有正当理由的)。这个资源包与主应用程序包一起添加到项目中，当我在 Interface Builder 中设计我的 NIB 时，所有这
我使用 Xcode 6.3.2 开发了一个 iPad 应用程序。我将我的应用程序提交到 App Store 进行审核，但由于崩溃而被拒绝。以下是来自 iTunes 的崩溃报告。 Incident Id
我正在使用以下内容来显示水平滚动条: CSS: div { width: 300px; overflow-x: scroll; } div::-webkit-scrollbar {
我是一名优秀的程序员,十分优秀！