调整固定标题和点击功能

Question

我有一个带有锚点的固定div，当单击时"跳转到"页面上的某个区域。由于页面跳转时正文位于固定div 下方，我的目的地与固定标题重叠。

要跳转到的元素使用数据属性在选项卡之间切换。我尝试在跳转单击事件触发时动态向正文添加填充，但存在计时问题。为了克服这个问题，我添加了setTimeout以便按顺序添加填充以正常工作。

当发生第二个点击事件时，单击事件会重置，该事件应将选项卡div 保持在固定div 下方的位置，但事实并非如此。我必须在单击时基本上删除填充样式，并使用相同的setTimeout函数以定时间隔将其添加回来。这有效，除了过渡是突然的。

接下来，我添加了一个具有 null 值的fadeOut函数，然后以正值1fadeIn添加。这会快速隐藏元素并将其淡入，但时机已晚，无法消除突然的填充过渡，此外，选项卡下方的元素也受到填充值的影响。

如何强制页面/元素在滚动时放置在固定的div 下方，使其不重叠以解决手头的问题？

---

jQuery(".totab").click(function() {
jQuery("body").css({
"padding-top" : ""
});
function delayHashedClick(){
jQuery("body").css({
"padding-top" : "110px"
});
jQuery(".hashed").fadeOut();
jQuery(".hashed").fadeIn(1);
}
setTimeout(delayHashedClick, 150);
});

https://sites.btwebnetwork.com/btwebgroup(单击第二个导航下拉菜单中的事件)

Answer 1

setTimeout使用一个onload事件，该事件在打开 anchor#hash 时应用所需的 CSS，然后使用click函数执行其余的魔术，无论最终到达内容，都可以保持一致的体验。仍然有一些突然的跳跃，但大多数访问者将使用选项卡式导航，而不是锚#哈希导航。

它并不完美，必须稍微播放超时和淡入淡出过渡时间才能使其看起来正常。

function delayHashedLoad(){
jQuery(".hashed").css({
"margin-top" : "140px"
});
}
window.onload = setTimeout(delayHashedLoad, 1200);
//
jQuery(".totab").click(function() { 
function delayHashedReset(){
jQuery(".hashed").css({
"margin-top" : ""
});
jQuery(".hashed").fadeOut();
}
delayHashedReset();
function delayHashedClick(){
jQuery(".hashed").css({
"margin-top" : "130px"
});
jQuery(".hashed").fadeIn(500);
}
setTimeout(delayHashedClick, 1000);
});