滚动时使用Javascript更改标题菜单

时间:2019-02-13 07:54:39

标签: javascript wordpress

当有人向下滚动时,我目前正在更改标题菜单。我可以使用它,但是现在当有人在页面上的任意位置向上滚动时,标题会变回原来的状态。我希望仅从顶部开始855px。

仅需澄清一点,就有两个标题“ Header-row-a”和“ Header-row-b”。加载页面时最初显示的是“ A”,当有人滚动超过855px时,它会变为“ B”。当某人超过855px +并向上滚动时,它变回'A',我只希望当某人在0px和855px之间备份时发生这种情况。

为给您更多说明,您自己看一下该网站:www.healthcoachfx.com,您会明白我的意思。

让我知道你们中的任何一个都可以破解!

非常感谢:)

我使用了以下Javascript和CSS:

var header_a = document.querySelector('#Header-row-a');
var header_b = document.querySelector('#Header-row-b');

var posY = 0;
window.addEventListener('scroll', function(e){
    if(this.pageYOffset > 855) {
        if(this.pageYOffset > posY) {
            header_a.style.transform = 'translateY(-81px)';
            header_b.style.transform = 'translateY(-81px)';
        } else {
            header_a.style.transform = 'translateY(0)';
            header_b.style.transform = 'translateY(0)';
        }
        posY = this.pageYOffset;
    }
});
@media screen and (min-width: 769px) {
    header.fl-builder-content{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    overflow: hidden;
    z-index: 30000;
}
#header-row-a {
    display: flex;
    align-items: center;
    height: 80px;
}
.fl-row-content-wrap {
    width: 100%;
}
#header-row-a, #header-row-b {
    top: 0;
    left: 0;
    width: 100%;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

1 个答案:

答案 0 :(得分:0)

我会做这样简单的事情:

Dim k As String
k = k & [text]
If k.Length = 7 Then
   Me.RichTextBox1.Text = k
   k = ""
End If