Question

http://www.new.techmoney360.com/是该网站，正在使用wordpress进行开发。

该导航栏是delegate?.segueToNext("GoToGreen")的一部分，也包含我的徽标部分，因此我不确定是否会导致问题。

这是整个html包含的导航栏，当我滚过它时我想要坚持到顶部。

<header>

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

<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>

Answer 1

将.mkd-top-bar置于所有包装器之外，诸如此类，将其置于<body>之下并在其中css应用position: fixed;

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

这是你要找的吗？

Answer 2

@Jacob部分正确，您不需要（同样多）JavaScript。以下是解决问题的方法。用以下内容替换当前功能：

window.onscroll = stickyNav;

function stickyNav() {
   var header = document.getElementById("navmenu");
   if (window.pageYOffset > 70) {
      header.classList.add("sticky");
   } else {
      header.classList.remove("sticky");
   }
}

然后，使用以下样式调整创建一个名为.sticky的新类：

.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

修改：将stickNav更新为stickyNav。

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

2 个答案: