个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
我有一个固定元素，当您在滚动中到达它时，它会附加到我的页面上。该元素有时可以在其上方但不在其下方有内容，这意味着页面深度可能不够深以支持这种行为，因此它会阻止用户到达页面底部并导致页面弹跳，大概是因为它在修复时从滚动中删除元素，这导致滚动事件函数中的条件不再为真。发生这种情况时，gif 会显示不良效果。
在这个 fiddle 中演示:https://jsfiddle.net/dcsjx625/8/
页面是动态的，因此无法删除单个页面的效果。
<body>
<div class="header">
<img src="http://placehold.it/600x401">
</div>
<div class="content-parent">
<div class="content">
<img src="http://placehold.it/600x400">
<img src="http://placehold.it/600x400">
<img src="http://placehold.it/600x400">
</div>
</div>
<div class="footer-content">
Footer
</div>
</body>
jQuery:
var $stickyChainOffset = $('.content').offset();
var $stickyChain = $('.content');
var $fixedWidth = $('.content').parent().width();
function checkScroll() {
if ($(window).scrollTop() > $stickyChainOffset.top - 100) {
$stickyChain.css('position', 'fixed').css('top', '100px').css('max-width', $fixedWidth);
} else {
$stickyChain.css('position', 'static').css('max-width', 'initial');
}
};
$(window).scroll(function() {
checkScroll();
});
/* Updates the $fixedWidth variable on resize */
$(window).resize(function() {
$fixedWidth = $('.content').parent().width();
$(window).scroll();
});
理想情况下，如果元素离页面底部足够近可能会导致问题，我想防止粘附效应。
我试过像这样在 checkScroll() 函数中计算页面深度与元素高度的关系，但即使这样也行不通。我觉得我正处于解决这个问题的边缘。:
function checkScroll() {
height = $stickyChain.height() + 100;
depth = $(document).height() - $stickyChainOffset.top;
if ($(window).scrollTop() > $stickyChainOffset.top - 100 && depth > height) {
$stickyChain.css('position', 'fixed').css('top', '100px').css('max-width', $fixedWidth);
} else {
$stickyChain.css('position', 'static').css('max-width', 'initial');
}
};
任何帮助将不胜感激!
最佳答案
老实说，我理解您的问题，但我不知道您何时以及为何会遇到这种确切的行为。也就是说，这是我的解决方法和一些注意事项:
fixed 元素高度的 2 倍，以便保持滚动条。否则，一旦元素被修复，您的文档就会完全失去滚动条。fixed 元素的原始偏移量保存到一个变量中，用作 future 重置的标记。但是，我还在每个滚动事件中重新定义了 $stickyChainOffset，您过去只定义了一次。我这样做是因为一旦修复它就会改变。css 中保存的填充，以查看页面在各种情况下的行为。如果您有任何其他问题，请告诉我。
关于javascript - 固定定位的滚动弹跳，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41906733/
25
4
0
我是一个 JS 菜鸟。我正在进入浏览器游戏编程，并想制作一个球掉落和弹跳的快速示例以供学习。由于某种原因，当我创建 jsfiddle 时，我的代码实际上不起作用，我的 div id="ball"的 o
我正在努力寻找为此目的的插件/插件，它是我项目的关键部分，我忽略了它，现在它咬了我。 我需要 jQuery 弹跳的变体，它使 div 无限期地围绕父 div/包装器弹跳。 实际上，我将拥有一个屏幕，用
我的 Nib 底部有一个 UIView。我希望它的高度能够增长，但让它看起来好像它没有移动位置，只是在增长。然后将高度缩小回原来的高度，除了高度之外不进行任何移动。不幸的是，它在 y 位置上反弹。它会
我做错了什么？我的技能栏正在跳舞。加载后我想修复它们。 在这里检查我的笔:http://codepen.io/anon/pen/KdEeWW $(window).scroll(function() {
我有一个有 2 列的表格，其中一列具有设定的宽度，第二列占据页面的其余部分。 在第一列中，我有另一个包含 2 个 tr 元素的表(这是由 asp 生成的) 如此处所示的表格:http://jsfidd
我正在使用 jQuery 构建基于标准 ul>li 结构的下拉导航。 一切都运行良好，但是，当我到达三元级别项目时，slideToggle 函数会导致“反弹”并且永远不会显示子 UL 由于有相当多的代
大家好，谢谢大家的帮助， 我想做的事情相当简单，我想显示一个跟随我的弹跳/反射 Raycast 的线渲染器。 这是我目前所拥有的。 private LineRenderer lr; public i
我试图对齐中间圆圈中的文本并让它们在圆圈悬停时弹跳(即文本) 这里是: http://jsfiddle.net/cJ3se/ 希望有人能帮忙 丹佛 最佳答案 将元素中的单行文本垂直居中的最简单方法是将
这很难解释，我来试一试。 我目前有一个从右向左无休止地滑动的图像背景，就像传送带一样。图像用完时会重复。 我试图让图像/动画在重复之前反弹(反向)。所以图像慢慢地向一个方向滑动，然后慢慢地向另一个方向
我想知道为什么我的弹跳动画在 JSFiddle 中不起作用但在我的开发网站上工作。请检查这个有什么问题。在我的开发站点中，箭头会弹跳但不会像我的 CSS 类中所说的那样旋转。 .active.ongo
我正在使用Pymunk模拟安装在细长腿顶部枢轴上的盒子的物理特性，该腿固定在地面上。连接盒子和腿的枢轴是 PivotJoint 和 SimpleMotor 的组合，模拟原始伺服系统，用户可以打开和关闭
我正在开发一个带有 ScrollView 的应用程序。不是很明显有更多内容，并且没有滚动指示器( ScrollView 被分页)。 所以，为了给用户一个“嘿，这里有东西……”，我想让 ScrollVi
我的应用程序中有启用了垂直弹跳的 UIScrollView。我需要屏幕底部的弹跳，但没有在屏幕顶部启用。 我不知道如何用以下方法检测 ScrollView : (void)scrollViewWi
我的网站有问题，我在其中使用带有 jQuery UI 的 jQuery，在登录框上创建弹跳效果。 但是，我对带有登录框的 div 有问题，因为它在屏幕左侧弹跳，当它应该在中间弹跳时，它在完成弹跳后
当网页内容大于视口(viewport)时，我正在尝试实现一种解决方案，以防止 iOS 版 Safari 中的 iOS 反弹效果。 我正在处理的页面在结构上非常具体，与此页面非常相似 http://ne
第一次在这里发帖，如有任何标记问题请见谅。写帖子用SOF框架不习惯。 我试图让一些社交图标在悬停时在我的网站上跳动。我从 jQuery UI 抓取代码进行测试并进行了一些小的编辑，但是我遇到了页面上可
我有一个 UIScrollView，我想在滚动时弹跳，但目前它能够弹跳，尽管内容大小与框架相同。如果内容大小和框架大小相同，如何阻止它弹跳？有没有比重写 setContentSize 和 setFra
我的网页最右侧有一个 div (RightSide)，它位于另一个 div (TopBanner) 的正下方。即使用户向下滚动，TopBanner div 也会保持其在屏幕顶部的准确位置。正是我想要的
我有一个带分页的水平 UIScrollView。有两个按钮。一个向左滚动 scrollView，另一个向右滚动。 左边的代码: - (IBAction)goLeftAction:(id)sender
我正在尝试创建自定义垂直 UIScrollView，它可以处理具有不同页面高度的多个页面。 假设: 页面高度等于或大于屏幕高度 如果页面高于屏幕高度，它会像往常一样滚动 UIScrollView –
我是一名优秀的程序员,十分优秀！