如何使導航欄出現在頁面的某些部分？ （也是引導程序）

Question

我正在建立一個網站，當他處於移動模式（> 767px）時，將看到一個導航欄。 我已經知道了，但是我希望此導航欄僅在第1節之后出現。

默認情況下，導航欄始終顯示。 我希望它僅在看到第2部分時出現。

請參閱以下示例：

示例： http ： //jsfiddle.net/gtw7375/3zc5Ltzp/

HTML：

<nav class="navbar navbar-default navbar-fixed-bottom visible-xs">
  <div class="container-fluid"> 

    <div class="navbar-header">
         <!-- <a class="navbar-brand" href="#">LOGO PSTCH</a> </div> -->


    <div class="collapse navbar-collapse visible-xs" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
       <li><a  href="#" data-toggle="modal" data-target="#myModal1" data-direction="bottom"> About</a></li>
       <li><a  href="#" data-toggle="modal" data-target="#myModal2" data-direction='bottom'> Sobre </a></li>
       <li><a  href="#" data-toggle="modal" data-target="#myModal3" data-direction='bottom'> Contact </a></li>


      </ul>    
    </div>
    </div>  
  </div> 
</nav>

 <div id="logo"> 

            <center>
                            <a href="#desce" class="page-scroll  btn btn-xl">SECTION 1</a>
            </center>
  </div>

  <div id="content">

    <p> SECTION 2  </p>

      <p> The navbar will appear here down/hereafter!</p>
  </div>

CSS：

html, body {
    height:100%;
    padding:0;
    margin:0;

}


#logo{
            background: black;
            width: 100%;
            height: 100%;          


}

#content {
        border: 1px solid black;
        width: 100%;
        height: 50%;
}

.navbar .nav  li{
    float:none;
    display:inline-block;
    *display:inline; /* Internet Explorer 7 compatibility */
    *zoom:1;
    vertical-align: bottom;

}


.navbar .navbar-collapse {
  text-align: center;
}

我怎樣才能做到這一點？

Answer 1

如果使用的是JQuery ，則可以偵聽窗口的滾動事件，檢查窗口是否滾動到元素的頂部偏移之外並采取相應的措施。 以下是利用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;
    }
});

您可以在此jsfiddle中看到這一點。 我從導航欄中刪除了visible-xs類，還向#logo元素添加了margin-bottom屬性，以使所有用戶都能注意到該效果（您不必在項目中這樣做）。

Answer 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;
    }
}