个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在寻找解决粘条问题的更好方法。
第二个和第三个框之间的“-----”是粘性条应该显示的阈值。当它显示时，它与第三个框完全重叠。
在真正的解决方案中，我使用 jquery 添加了 css (margin-top) 以将此元素推送到下方；但问题是它在 Firefox 中滞后。人们可以在 UI 上看到这个空间几分之一秒。
实现输出(或避免 margin-top)的最佳解决方案是什么？
$(document).ready(function(){
function toggleDock() {
if($(window).scrollTop() >= $('.second').offset().top+$('.second').height()) {
$('.sticky').show();
}
else {
$('.sticky').hide();
}
}
$(window).bind('scroll',toggleDock);
});.box {
border: 1px dotted red;
height: 100px;
width: auto;
margin: 20px 0;
}
.sticky {
height: 80px;
border: 1px dotted green;
margin: 20px 0;
display: none;
position: sticky;
top: 20px;
background: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class='page docked'>
<div class='sticky'>
</div>
<div class='box'>
First
</div>
<div class='box second' >
2nd
</div>
-------
<div class='box'>
3rd
</div>
<div class='box'>
4th
</div>
<div class='box'>
5th
</div>
<div class='box'>
6th
</div>
<div class='box'>
7th
</div>
<div class='box'>
8th
</div>
</body>最佳答案
更新的答案
我认为您需要在正常流程中保持您的 sticky div，而 position: sticky 在这里可能不是正确的选择。这是一个例子:
$(document).ready(function(){
function toggleDock() {
if($(window).scrollTop() >= $('.second').offset().top+$('.second').height()) {
$('.sticky').show();
}
else {
$('.sticky').hide();
}
}
$(window).bind('scroll',toggleDock);
});.box {
border: 1px dotted red;
height: 100px;
width: auto;
margin: 20px 0;
}
.sticky {
height: 100px;
border: 1px dotted green;
margin: 20px 0;
top: 40px;
display: none;
background: green;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body class='page docked'>
<div class='box'>
First
</div>
<div class='box second' >
2nd
</div>
-------
<div class='sticky'>
</div>
<div class='box'>
3rd
</div>
<div class='box'>
4th
</div>
<div class='box'>
5th
</div>
<div class='box'>
6th
</div>
<div class='box'>
7th
</div>
<div class='box'>
8th
</div>
</body>一个关于 CSS 流程的好文档:http://marksheet.io/css-the-flow.html
position: sticky 那里没有详细说明，但是来自 this document ，您会看到 sticky 元素在可见时相对于其包含元素定位，并变为 fixed (也就是说，它脱离了正常的文档流) 当它的包含元素不可见时:
A stickily positioned element is an element whose computed position value is sticky. It's treated as relatively positioned until its containing block crosses a specified threshold, at which point it is treated as fixed.
希望这对您有所帮助!
关于javascript - 粘性 float 条 : accurate position，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47894856/
24
4
0
我有一个具有多种随机形式的场景(如三 Angular 形、梯形，还有更多自定义设计)，我正在尝试编写碰撞检测代码。这些形状都是二维的，并且位于 Y=0 由于形状比圆形和矩形更复杂，我决定使用光线转换来
所以我对编程还很陌生，但我只是在研究一个简单的计算器。当我启动程序并尝试除法部分(尝试将 5 除以 2)时，输出为 3.0 。这 2 个数字是 float ，所以我真的不明白为什么这不起作用。其次，乘
我正在寻找一种准确的AS3语法(格式不是问题，但我想ANTLR将发挥最大作用)可用于我正在制作的实践语法。 可用于AS3的最准确的语法是什么？ 最佳答案 如果您正在寻找一种ANTLR语法，我认为这是非
我正在尝试将 GPS 功能添加到我的 iPhone 应用程序中。这是一款在步行或运行时使用的锻炼应用程序。所以我想使用 GPS 来显示人的移动速度(以英里/小时和分钟/英里为单位)。 我应该如何配置
我在 PlaneGeometry 上使用 EdgesGeometry，它似乎在鼠标事件中创建了一个更大的碰撞框。然而，当使用 CircleGeometry 时，这一点并不明显。我有以下内容:
我希望从 URL 中提取以下字段，如协议(protocol)、域名、端口和路径。 我知道这个split 函数对我很有帮助。这是我的代码 "https://www.test.com:8081/a/b/c
我发现无论何时我们想要多态性，我们都需要指针或引用，因为将 Derived 实例存储在 Base 变量中会“切掉”任何不是的东西在“基础”中定义。 (我想那是因为 Derived 和 Base 实例不
我在 python 中使用 Tkinter 制作了一个倒数计时器，但我唯一的问题是计时器中的一秒比实际秒长一点。 我使用 after() 函数每毫秒从时钟中删除一毫秒(0.001 秒)。 我不知道它是
我最近询问了我当前工作地点的前首席开发人员，为什么他选择使用Razor Generator将我们的 View 预编译为单独的文件组装。 他在下面提出了一些主张，但我似乎无法在网络上找到任何 Razor
我正在使用 Windows 批处理文件与服务器执行双向同步。批处理文件将由多人使用，以同步具有单个网络位置的多台计算机。由于我不会进入的限制，它必须是一个批处理文件。没有 vbscript，没有 ja
我想为代码中的每个函数计时。所以我有 func1(); func2(); func3(); 目前我正在使用 #include #include double start1=omp_get_wtim
sizeWithFont:constrainedToSize:lineBreakMode: 似乎没有返回正确的宽度。执行这些代码后，我看到标签中的部分字符串被截断了，这意味着我必须手动添加几个像素的大
我正在尝试在 Julia 中实现以下公式来计算 Gini coefficient工资分配: 哪里 这是我为此使用的代码的简化版本: # Takes a array where first column
在 Xcode 9.1 上，Pixel Accurate 选项在Window 菜单下被禁用并呈灰色显示。 如果没有此选项，如何截取 App Store 屏幕截图？ 最佳答案 原来的答案是错误的! Ap
我正在使用谷歌地图 API 3 和自定义叠加层 (OverlayView)我有这个代码: http://jsfiddle.net/8X6cY/1/ 请将鼠标悬停在制作者上以便查看工具提示叠加层。 如何
好吧，我没有使用“alsoResize”，但我已经测试过，它的行为是相同的。 当您调整主元素的大小时，底部元素“选取框”的黑色边框通常会与顶部元素的白色虚线边框偏离。 $(".layer").resi
我不明白这条 itunesconnect 信息？ 我使用这个库: https://github.com/ISBX/apprtc-ios/issues We noticed that your app
我有一个包含调用详细记录的 mysql 数据库。在这个特定的查询中，我想搜索所有调用以了解调用断开的原因，并返回断开连接原因的列表以及每个原因发生的次数。 示例结果集如下所示: causeCode
我正在寻找解决粘条问题的更好方法。 第二个和第三个框之间的“-----”是粘性条应该显示的阈值。当它显示时，它与第三个框完全重叠。 在真正的解决方案中，我使用 jquery 添加了 css (marg
我正在关注这个 Vulkan Youtube video tutorial约书亚舒克。我目前正在观看他的第 14 个视频，他正在为顶点缓冲区创建辅助队列系列。这侧重于顶点缓冲区的暂存过程。我的代码与他
我是一名优秀的程序员,十分优秀！