具有固定导航栏的 Javascript 不起作用

标签 javascript html css wordpress

http://www.new.techmoney360.com/是网站,它是用 wordpress 开发的。

导航栏是 <header> 的一部分这也包含我的 Logo 部分,所以我不确定这是否会导致问题。

这是包含导航栏的整个 html,当我滚动经过它时,我想将其固定在顶部。

<div  id="navmenu" class="mkd-menu-area">
    <div class="mkd-grid">
        <div class="mkd-vertical-align-containers">
            <div class="mkd-position-left">
                <div class="mkd-position-left-inner">
                    <?php if(is_active_sidebar('mkd-left-from-main-menu')) : ?>
                        <?php dynamic_sidebar('mkd-left-from-main-menu'); ?>
                    <?php endif; ?>
                    <?php discussion_get_main_menu(); ?>
                </div>
            </div>
            <div class="mkd-position-right">
                <div class="mkd-position-right-inner">
                    <?php if(is_active_sidebar('mkd-right-from-main-menu')) : ?>
                        <?php dynamic_sidebar('mkd-right-from-main-menu'); ?>
                    <?php endif; ?>
                </div>
            </div>
        </div>
    </div>
</div>

这是我用来定位导航栏的 javascript(感谢 akinuri 的脚本)

window.onscroll = changePos;

function changePos() {
   var header = document.getElementById("navmenu");
   if (window.pageYOffset > 182) {
      header.style.position = "absolute";
      header.style.top = pageYOffset + "px";
   } else {
      header.style.position = "";
      header.style.top = "";
   }
}

最佳答案

地点.mkd-top-bar在所有包装器之外,将其放在 <body> 下方在它的 css 中应用 position: fixed;

.mkd-top-bar {
    background-color: #303030;
    position: fixed;
}

这是您要找的吗?

关于具有固定导航栏的 Javascript 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37576470/

相关文章:

html - 伪类内容未正确显示

CSS Grid 自动调整每行的宽度

javascript - document.location 不生成文件

javascript - 如何让变量脱离闭包?

html - 为什么会出现溢出?

javascript - 复选框列表不适用于下拉选择

html - 匹配背景图像的高度以进行叠加

javascript - JS从django模板标签获取数据

javascript - 如何在 JavaScript 中获取 `wait`

html - 通过 CSS/CSS 装饰 DIV 并使用全页宽度 :before and :after