Html 如何使导航栏出现在页面的特定部分？（也是自举）

我正在制作一个网站，当他处于移动模式（>767px）时，会看到一个导航栏。我已经知道了，但是我希望这个导航条只出现在第1节之后

默认情况下，导航栏始终显示。我希望它只在我看到第2节时出现

请参见下面的示例：

例如：

HTML:

---

我该怎么做呢？

我真的不明白您想用代码做什么

<div id="box01">
     <p>This will be hidden, only visible after 767px.</p>
</div>

.box01 {
    display: none;
}
@media screen and (max-width : 767px) {
    .box01 {
        display: block;
    }
}

这将被隐藏，仅在767px之后可见

.box01{
显示：无；
}
@媒体屏幕和屏幕（最大宽度：767px）{
.box01{
显示：块；
}
}

如果您正在使用，您可以监听窗口的滚动事件，检查它是否已滚动到元素的顶部偏移量之外，并采取相应的措施。下面是使用JQuery插件的Javascript代码

$(document).ready(function(){

  $(".navbar").hide(); //Hide the navigation bar first

    $(window).scroll(function () {  //Listen for the window's scroll event
        if (isScrolledAfterElement("#content")) { //if it has scrolled beyond the #content elment
            $('.navbar').fadeIn();  //Show the navigation bar
        } else {
            $('.navbar').fadeOut(); //Else hide it
        }
    });

    //Function that returns true if the window has scrolled beyond the given element
    function isScrolledAfterElement(elem) {
        var $elem = $(elem);
        var $window = $(window);

        var docViewTop = $window.scrollTop();
        var docViewBottom = docViewTop + $window.height();

        var elemTop = $elem.offset().top;

        return elemTop <= docViewBottom;
    }
});

$（文档）.ready（函数（）{
$（“.navbar”）.hide（）；//首先隐藏导航栏
$（窗口）.scroll（函数（）{//侦听窗口的滚动事件
if（isscrolledaftereelement（#content”）{//如果它已滚动到#content元素之外
$（'.navbar'）.fadeIn（）；//显示导航栏
}否则{
$（'.navbar'）.fadeOut（）；//否则将其隐藏
}
});
//函数，如果窗口滚动超过给定元素，则返回true
函数IsCrolledTerelement（elem）{
变量$elem=$（elem）；
变量$window=$（window）；
var docViewTop=$window.scrollTop（）；
var docViewBottom=docViewTop+$window.height（）；
var elemTop=$elem.offset（）.top；
返回元素，请把所有相关的代码包含在你的帖子中，不要只包含一个代码托管站点的链接。你的文章应该独立于任何其他资源；考虑一下如果网站在未来下降了会发生什么！我希望NavBar只出现在第2节的页面中。如在例子中。明白吗？
<div id="box01">
     <p>This will be hidden, only visible after 767px.</p>
</div>

.box01 {
    display: none;
}
@media screen and (max-width : 767px) {
    .box01 {
        display: block;
    }
}

$(document).ready(function(){

  $(".navbar").hide(); //Hide the navigation bar first

    $(window).scroll(function () {  //Listen for the window's scroll event
        if (isScrolledAfterElement("#content")) { //if it has scrolled beyond the #content elment
            $('.navbar').fadeIn();  //Show the navigation bar
        } else {
            $('.navbar').fadeOut(); //Else hide it
        }
    });

    //Function that returns true if the window has scrolled beyond the given element
    function isScrolledAfterElement(elem) {
        var $elem = $(elem);
        var $window = $(window);

        var docViewTop = $window.scrollTop();
        var docViewBottom = docViewTop + $window.height();

        var elemTop = $elem.offset().top;

        return elemTop <= docViewBottom;
    }
});