Question

我在单页网站上有一个全屏标题。在hero元素之后，有我的导航元素，在滚动到整个屏幕高度后应该修复。这就是我现在所拥有的。

HTML：

<div id="hero">
    <div class="welcome">
        <img src="<?php echo get_template_directory_uri(); ?>/library/images/logo.png" alt="Logo"/>
    </div>
    <a href="http://localhost/elephant/#inner-header"><img class="arrow" src="<?php echo get_template_directory_uri(); ?>/library/images/arrow.png" alt="Weiter"/></a>
</div>

<nav class="nav"> (...) </nav>

CSS：

#hero {
    background-image:url(../images/hero.jpg);
    background-size:cover;
    position:relative;
    height:100vh;
}

JavaScript的：

$(function () {
/* $(".navbar-fixed-top").css({"top":$("#hero").height()});

    $(window).resize(function (e) {
    $(".navbar-fixed-top").css({"top":$("#hero").height()});
    }); */

$(document).on( 'scroll', function(){
    console.log('scroll top : ' + $(window).scrollTop());
        if($(window).scrollTop()>=$("#hero").height())
        {
             $(".nav").addClass("navbar-fixed-top");
        }

        if($(window).scrollTop()<$("#hero").height())
        {
             $(".nav").removeClass("navbar-fixed-top");
        }
    });
});

你能看出我犯了哪个错误吗？

Answer 1

看来你的javascript工作正常。我创建了Fiddle似乎工作得很好。我添加的只是一些像这样的CSS：

.nav.navbar-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}

看看小提琴，让我知道这是否是你想要的。

希望这有帮助。

Answer 2

如果我理解正确，当您向下滚动时，您正试图让导航元素保持固定在屏幕顶部。我认为首先要尝试的是“粘性”＃39;在nav元素上，看看是否有效？

全屏标题后固定导航

2 个答案: