Question

如果导航栏位于顶部，当我向下滚动文本时，如何显示文本我希望h1中的文本P_DECO在向下滚动时出现，当栏位于网站顶部时隐藏

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
   <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <h1 class="h">P-DECO</h1>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="aboutus.html">About Us</a>
            </li>
               <li>
                <a href="services.html">Services</a>
            </li>
               <li>
                <a href="factory.html">Factory</a>
            </li>
               <li>
                <a href="projects.html">Projects</a>
            </li>
               <li>
                <a href="client.html">Clients</a>
            </li>
               <li>
                <a href="video.html">Video</a>
            </li>
            <li>
                <a href="contactus.html">Contact Us</a>
            </li>
        </ul>
    </div>
    <!-- /.navbar-collapse -->
</div>
<!-- /.container -->

Answer 1

你可以使用jQuery：

 $(window).on("scroll", function() {
    var h_title = $(".h");
        var scrollPos = $(window).scrollTop();
        if (scrollPos < 100) {
            h_title.fadeIn();
        } else {
            h_title.fadeOut();
        }
    });

100必须根据您的需求进行调整。

修改

您最好为id设置<h1 class="h">P-DECO</h1>。然后第二行应该是这样的：

var h_title = $("#YOUR_ID");

顶部栏显示文字

1 个答案: