Question

我有一个带有锚点的固定div，当点击时＃34;跳跃＆＃34;到页面上的某个区域。由于当页面跳转时主体位于固定div下方，因此目标与固定标题重叠。

要跳转到的元素使用数据属性在标签之间切换。当跳转点击事件触发时，我试图动态地向主体添加填充，但是存在计时问题。为了克服这个问题，我添加了setTimeout，以便按顺序添加填充以便工作。

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

接下来，我添加了一个空值为fadeOut的函数，然后添加了fadeIn，其值为1。这会快速隐藏元素并将其淡入其中，但是时间太晚以至于无法消除突然的填充过渡，此外，标签下方的元素也会受到填充值的影响。

如何强制页面/元素在滚动的固定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函数执行其余的魔法保持一致的体验然而你最终得到的内容。仍有一些突然跳跃，但大多数访问者将使用标签式导航，而不是锚点#hash导航。

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

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);
});

调整固定标题和单击功能

1 个答案: