28
4
我一直在阅读粘性标题，这是我目前所发现的。第一个粘性 header 效果很好，但是当它遇到第一个 header 时，我如何向上滚动第一个 header 并使第二个 header 卡住？
Trung tâm cá nhân
Điều phát hành
từ bỏ
Scroll this page.
Super amazing header
Still there?
Yep!
Scroll so hard!
Super amazing 123
Still there?
Yep!
Scroll so hard!
var sticky = document.querySelector('.sticky');
var origOffsetY = sticky.offsetTop;
function onScroll(e) {
window.scrollY >= origOffsetY ? sticky.classList.add('fixed') :
sticky.classList.remove('fixed');
}
document.addEventListener('scroll', onScroll);
câu trả lời hay nhất
我相信以下内容将完全如您所愿...
当滚动过去时，#firstHeader 将绑定(bind)到顶部，然后当 #secondHeader Và #firstHheader 的底部发生碰撞时他们将加入，#firstHeader 将被推出屏幕，直到 #secondHeader 到达屏幕顶部并绑定(bind)到那里...
希望这是有道理的，如果没有，如果您实际看到它可能会更容易:http://jsfiddle.net/yZKea/
此解决方案确实使用了 jquery。因此，您需要在 head 中的其余 JS 代码之前包含对它的引用:
Để ý JS 并不像看起来那样令人生畏 hoặcdài，大部分内容是样式的重复设置。您可以轻松地将其更改为几行:)
html, nội dung {
margin: 0;
padding: 0;
đường viền: 0;
}
.spacer{
height:200px;
background:#f00;
opacity:.5;
border-top:#d22 5px solid;
width: 100%;
}
#firstHeader{
background:#00f;
chiều cao: 100px;
width: 100%;
z-index:500;
}
#secondHeader{
background:#0f0;
chiều cao: 100px;
width: 100%;
z-index:500;
}
Header 1
Header 2
function scrollFunction(){
var sticky1 = $('#firstHeader');
var sticky2 = $('#secondHeader');
sticky1.css({
position: "static",
hàng đầu: 0
});
sticky2.css({
position: "static",
hàng đầu: 0
});
$('body').css({
"padding-top": 0
});
var topOffset1 = sticky1.offset().top;
var topOffset2 = sticky2.offset().top;
var stickyHeight1 = sticky1.outerHeight();
var stickyHeight2 = sticky2.outerHeight();
var scrollHeight = $(window).scrollTop();
if(topOffset1 <= scrollHeight && scrollHeight < topOffset2 - stickyHeight1){
sticky1.css({
position: "fixed",
hàng đầu: 0
});
sticky2.css({
position: "static",
hàng đầu: 0
});
$('body').css({
"padding-top": stickyHeight1
});
}
else if(scrollHeight >= topOffset2 - stickyHeight1 && scrollHeight < topOffset2){
sticky1.css({
position: "fixed",
top: - (scrollHeight - (topOffset2 - stickyHeight1))
});
sticky2.css({
position: "fixed",
top: stickyHeight1 - (scrollHeight - (topOffset2 - stickyHeight1))
});
$('body').css({
"padding-top": stickyHeight1 + stickyHeight2
});
}
else if(scrollHeight >= topOffset2){
sticky1.css({
position: "static"
});
sticky2.css({
position: "fixed",
hàng đầu: 0
});
$('body').css({
"padding-top": stickyHeight2
});
}
khác{
sticky1.css({
position: "static",
hàng đầu: 0
});
sticky2.css({
position: "static",
hàng đầu: 0
});
$('body').css({
"padding-top": 0
});
}
}
$(window).scroll(scrollFunction);
这应该可以解决屏幕闪烁的问题。
var topOffset1, topOffset2;
function scrollFunction(){
var sticky1 = $('#firstHeader');
var sticky2 = $('#secondHeader');
var stickyHeight1 = sticky1.outerHeight();
var stickyHeight2 = sticky2.outerHeight();
var scrollHeight = $(window).scrollTop();
if(topOffset1 <= scrollHeight && scrollHeight < topOffset2 - stickyHeight1){
sticky1.css({
position: "fixed",
hàng đầu: 0
});
sticky2.css({
position: "static",
hàng đầu: 0
});
$('body').css({
"padding-top": stickyHeight1
});
}
else if(scrollHeight >= topOffset2 - stickyHeight1 && scrollHeight < topOffset2){
sticky1.css({
position: "fixed",
top: - (scrollHeight - (topOffset2 - stickyHeight1))
});
sticky2.css({
position: "fixed",
top: stickyHeight1 - (scrollHeight - (topOffset2 - stickyHeight1))
});
$('body').css({
"padding-top": stickyHeight1 + stickyHeight2
});
}
else if(scrollHeight >= topOffset2){
sticky1.css({
position: "static"
});
sticky2.css({
position: "fixed",
hàng đầu: 0
});
$('body').css({
"padding-top": stickyHeight2
});
}
khác{
sticky1.css({
position: "static",
hàng đầu: 0
});
sticky2.css({
position: "static",
hàng đầu: 0
});
$('body').css({
"padding-top": 0
});
}
}
$(hàm(){
topOffset1 = $('#firstHeader').offset().top;
topOffset2 = $('#secondHeader').offset().top;
});
$(window).scroll(scrollFunction);
只需将类 .header 添加到您的 header ，这将适用于任意数量的 header (1、5、100……您明白了)。
这是对上述 JS 的完全替代，每个新 header 都会在旧 header 绑定(bind)到顶部之前将其推到屏幕之外。
请参阅此更新的 jsfiddle 以获取其实际应用示例:http://jsfiddle.net/5bkst/
var topOffset = new Array();
function scrollFunction(){
var scrollHeight = $(window).scrollTop();
var headerCounter = 0;
var scrolled = 0;
var headerItems = $('.header').length;
$('.header').each(function(index, el){
var elementHeight = $(this).outerHeight();
var nextElementHeight = 0;
var nextElement;
if(index !== $('.header').length - 1){
nextElementHeight = $('.header').eq(index + 1).outerHeight();
nextElement = $('.header').eq(index + 1);
}
if(scrollHeight >= topOffset[headerCounter]
&& (scrollHeight < topOffset[headerCounter + 1] || headerCounter == headerItems-1)){
scrolled = 1;
if(scrollHeight >= topOffset[headerCounter + 1] - elementHeight){
$(this).css({
position: "fixed",
top: - (scrollHeight - (topOffset[headerCounter + 1] - elementHeight))
});
nextElement.css({
position: "fixed",
top: topOffset[headerCounter + 1] - scrollHeight
});
$('body').css({
"padding-top": elementHeight + nextElementHeight
});
trả về sai;
}
khác{
$(this).css({
position: "fixed",
hàng đầu: 0
});
nextElement.css({
position: "static",
});
$('body').css({
"padding-top": elementHeight
});
}
}
khác{
$(this).css({
position: "static"
});
}
headerCounter++;
});
if(scrolled == 0){
$('body').css({
"padding-top": 0
});
}
}
$(hàm(){
$('.header').each(function(){
topOffset.push($(this).offset().top);
});
});
$(window).scroll(scrollFunction);
关于javascript - 当到达当前卡住的 header 时，用第二个 header 替换粘性 header ，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18938191/
28
4
0
我在让“@header”或任何其他@规则在ANTLR中工作时遇到麻烦。具有非常基本的语法，如下所示: grammar test; options { language = CSharp2;
我对来源和寄宿有疑问 我有一个ajax页面“Page A”，它将称为ajax提要“Page B” 我看到来自ajax调用的“页面B”的请求 header 具有源“http://mydomain.com
我在 pandas 中使用了数据透视表并获得了所需的数据框格式，但现在我有两行标题。数据透视表后的结果数据框如下: scenario Actual Plan
我在 pandas 中使用了数据透视表并获得了所需的数据框格式，但现在我有两行标题。数据透视表后的结果数据框如下: scenario Actual Plan
我想在主机将它们发送到网络之前修改数据包头(IP 头、TCP 头)。 例如，如果我使用 firefox 进行浏览，那么我想拦截所有来自 firefox 的数据包并修改 IP/TCP header ，然
我的 header 内容被包装到#header 中，但是当我设置边框显示结构时，它显示我的#header 的内容出现在#header 本身之后。可能是什么问题？这是我的代码: #header { bo
我是一名 Web 开发人员，使用过 PHP 和 .NET。有一年多的 Web 工作经验，我一直无法彻底了解浏览器缓存功能，希望这里的 Web Gurus 可以帮助我。我心中的问题是: 浏览器实际上是如
伙计们，我有一个问题，我不知道如何在一个 header 中连接多个 header ，我们称它为“主 header ”并使用该 header 中的函数，例如 // A.h #include class
我有一个包含 SOAP 消息的 XMLHTTPRequest。 我想添加用于标识消息并将由 C# Web 服务使用的 guid。 GUID 的目标是识别特定用户，并应护送所有用户请求以在服务器上进行身
我一直在阅读粘性标题，这是我目前所发现的。第一个粘性 header 效果很好，但是当它遇到第一个 header 时，我如何向上滚动第一个 header 并使第二个 header 卡住？ http://
我想将当前基于 TableView 的数据网格转换为新的 UICollectionView 类。 这就是我当前的网格的样子: 我的网格有两个标题: 年份(2006a、2007a 等)和 类型(“收入”
我目前正在使用 Apollo 服务器。我正在尝试在响应 header 中设置一个属性。并且此属性是从客户端 graphQL 请求 header 中检索的。 我在网上查了一下。并看到了诸如使用插件或扩展
我的 Controller 的方法需要设置一个标题，例如X-Authorization .创建新对象( store Action )后，我执行转发以显示新创建的对象( show Action ): $
我正在研究一些关于 VLAN 的事情，发现了 VLAN 标签 和 header 。 如果我们有标准 802.3 以太网帧 的 MTU(1518 字节)， header 802.3 中包含什么？ 另外，
我是放心和 Java 的新手，我正在尝试做一个非常基本的测试来检查 API 的响应是否为 200 ok。 谁能告诉我我需要在下面的脚本中更改什么才能传递多个 header Id、Key 和 ConId
在我的项目中，我需要知道 zlib header 是什么样的。我听说它相当简单，但我找不到 zlib header 的任何描述。 例如，它是否包含魔数(Magic Number)？ 最佳答案 zlib
我正在使用 JMeter 测试 HTTP 服务器，该服务器接受并验证 APIKey 并在成功时返回一个有时限的 token 。如果我有 token ，我想发送一个 token ；如果没有，我想发送一个
以太网 header 是什么样的？ 是吗: 1|2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|
我们的应用程序支持 CORS 配置 header 。我在两个不同的主机上分别配置了 testApp。两种设置都相互独立工作。host1 上的应用程序配置有 CORS header Access-Con
tlhelp32.h 不包含 windows.h 本身是有原因的吗？我一直在与大量的编译器错误作斗争，因为我在包含 tlhelp32.h 之后包含了 windows.h。这是设计决定还是出于什么原因？
Tôi là một lập trình viên xuất sắc, rất giỏi!