- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我在使用 jQuery 制作粘性 header 时遇到了一个具体问题。我尝试了网络上常用的片段,但我发现到处都是同样的错误。
在特定的文档高度(可滚动直到比调用粘性效果高一点),粘性标题在 position: fixed
和 position: static
之间跳转。
HTML:
<header>
<div id="not-sticky"></div>
<div id="sticky"></div>
</header>
<div id="content"> ...
jQuery:
var $sticky = $("#sticky");
var offset = $sticky.offset();
var stickyTop = offset.top;
var windowTop = $(window).scrollTop();
$(window).scroll(function() {
windowTop = $(window).scrollTop();
if (windowTop > stickyTop) {
$sticky.css({
position: 'fixed',
top: 0
});
}
else {
$sticky.css({
position: '',
top: ''
});
}
});
CSS:
header {
width: 100%;
}
#not-sticky {
padding: 50px 0;
width: 100%;
}
#sticky {
padding: 24px 0;
position: relative;
width: 100%;
z-index: 25;
}
我还尝试在 #not-sticky
上使用与 #sticky
相同高度的 margin-bottom 来保持恒定的文档高度,但是发生了同样的跳动粘性效果。
有什么办法可以解决这个问题吗?
最佳答案
滚动触发太多次,尝试设置元素 style
总是不可避免地会产生跳跃(甚至几乎不明显,但仍然有锯齿)。
我发现最好的方法是
修复
visibility
样式。纯 JS:
;(function(){ /* STICKY */
var sticky = document.getElementById("sticky"),
sticky2 = sticky.cloneNode(true);
sticky2.style.position = "fixed";
document.body.appendChild(sticky2);
function stickIt(){
sticky2.style.visibility = sticky.getBoundingClientRect().top<0 ? "visible" : "hidden";
}
stickIt();
window.addEventListener("scroll", stickIt, false );
}());
#sticky{
height:100px;
background:#ada;
height:50px;
position:relative;
/* needed for clone: */
top:0;
width:100%;
}
/* Just for this demo: */
*{margin:0;padding:0;}
#content{height:2000px; border:3px dashed #444;}
h1{padding:40px; background:#888;}
<h1>Logo</h1>
<div id="sticky">Sticky header</div>
<div id="content">Lorem ipsum...<br>bla bla</div>
因此,当您看到“标题”修复 时,这实际上是我们的固定克隆在顶部可见。
关于javascript - Sticky Header - buggy 在滚动条上跳跃,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16513794/
我在 Processing 中制作碰撞球草图时,遇到了一个奇怪的错误。尽管有从墙壁弹回的条件,一些球还是会粘在上面。我在这里找不到错误的来源。有人可以帮忙吗?我也意识到可能很少(很多)错误的编码实践,
我有一个函数: def greeter(name, greeting, punc): print greeting+', '+name+punc 我有一个带参数的字典: params={'na
我真的不擅长解释,但这是悬停时的 gif 动图: 我只需要在鼠标悬停时箭头从左侧发出(不像 gif 中那样)。当您查看 gif 时,您就会明白我的意思。 这是我的 CSS: .nav-backgrou
当我将文本阴影与文本笔划结合使用时,我遇到了网络编程问题。同一文本的阴影版本在两侧被剪切,这不是我期望的。有谁知道如何在以这些速率同时使用阴影和描边的同时避免这个问题? 我实际上可以看到,在 Safa
关闭。这个问题需要debugging details .它目前不接受答案。 编辑问题以包含 desired behavior, a specific problem or error, and th
我的存储库出现了最疯狂的错误,我不知道该怎么办。在我的 repo 协议(protocol)中,我有三个分支。 master > branch_1 > branch_2 来自 branch_1 git
我有一个使用2D蓝牙扫描仪扫描条形码的应用程序。该应用程序已投入生产,并且运行良好,现在有了Flutter的最新SDK更新,一旦打开软/虚拟键盘,我用来监听扫描仪输入的RawKeyboardListe
我正在使用 Beginning Android Games 中的游戏引擎并从头开始制作突破游戏。我的 Racket /球/积木可以正常工作,但现在我正在解决错误。随机地,我的乒乓球会撞到任何墙壁,它会
我有一些正在解析的图像。 (5 个对象每个都有一个 PFFile,每个图像大约 800x800 400Kb)。当我第一次在我的设备 (iphone 5S) 上运行该应用程序时,图像加载,一切正常。当我
我有一个奇怪的问题,它可能比其他任何问题都更糟糕的编码。 基本上,I have this site如果您将浏览器的大小调整为网站的大小,您会看到可以向右滚动。这是因为我有一个 与 position:
我有一个 div,单击它会在右侧滑入,但如果它尚未打开或打开,我也试图让它在滚动时滑入。因此,您可以单击按钮使其滑入,或者如果在您向下滚动页面时将其关闭,它会打开,然后在几秒钟后消失,或者如果单击按钮
编辑 - 测试这个的确切最小代码是在我下面的原始帖子中,但它是两个 block 。抱歉,这里是一体的。注释掉 main 中的实例化然后一次取消对它们的注释显示了我在这篇文章中描述的行为。 templa
我有一个 ListView,我在一个单独的 XML 文件中定义了每个项目的布局。在这个文件中,我包含了一个 RatingBar 和一个 EditText。 我在这个 ListView 中以编程方式创建
我有一个问题,有人引入了一个错误,但是我不知道引入此错误的Subversion提交。我正在寻找类似svn的漂亮git功能bisect。 有谁知道脚本例如python模拟此功能? 最佳答案 svn 而不
我正在尝试在圆周围排列点。但我得到了错误的结果。某些 Angular (顶部和底部)未正确定位。会出现什么问题? 如何解决这个问题? $(function(){ var globe = $('
我有 3 个 div(#col1、#col2 和 #col3),其中包含包含在 span 标记中的关键字。当用户单击关键字/范围时,它会从 #col1 或 #col2 移出并移至 #col3。然后,当
我曾经将我的程序作为小程序运行,当时它工作得很好,但我决定尝试让它在 JFrame 中运行。我最近遇到了覆盖问题,但我想我终于解决了这个问题。这是我最近一直在制作的一款游戏,它基本上是《Flappy
所以我在工作中已经使用了几个月的 NetBeans。还有一些非常严重的错误,我简直不敢相信大多数人的版本中都存在这些错误。 我的产品版本:NetBeans IDE 7.0.1(内部版本 2011072
最近,我再次注意到 CodeIgniter 的 ActiveRecord 库中存在一个令人难以置信的逻辑错误。 当我尝试在联接中使用“AND”时出现问题。 示例查询: $this -> db -> j
不幸的是,我无法在 jsfiddle 中重现它……无论如何,这是我的代码:http://jsfiddle.net/nZePr/ 基本上,当您将鼠标悬停在工具提示上时,它会留下一个非常微弱的幻影,其不透
我是一名优秀的程序员,十分优秀!