Question

使用WordPress和Bootstrap 4的导航栏我想添加效果，页面顶部的导航栏是透明的，向下滚动时淡出淡出，淡入淡出（带背景颜色）但在到达之前top fadesOut将背景颜色变为透明。

我已使用this example中的jQuery，但在我达到顶部删除背景颜色之前，我不知道如何添加＆＃39;

示例代码：

    $(function () {
      var lastScrollTop = 0;
      var $navbar = $('.navbar');

      $(window).scroll(function(event){
        var st = $(this).scrollTop();

        if (st > lastScrollTop) { // scroll down

          // use this is jQuery full is used
          $navbar.fadeOut()

          // use this to use CSS3 animation
          // $navbar.addClass("fade-out");
          // $navbar.removeClass("fade-in");

          // use this if no effect is required
          // $navbar.hide();
        } else { // scroll up

          // use this is jQuery full is used
          $navbar.fadeIn()

          // use this to use CSS3 animation
          // $navbar.addClass("fade-in");
          // $navbar.removeClass("fade-out");

          // use this if no effect is required
          // $navbar.show();
        }
        lastScrollTop = st;
      });
    });

最近的example I've found使用导航栏和div来锻炼滚动高度以进行更改，但我不想依赖div ID。

    //jQuery to collapse the navbar on scroll
    var header_height  = $('.navbar').height(),
        intro_height    = $('.intro-section').height(),
        offset_val = intro_height + header_height;
    $(window).scroll(function() {
      var scroll_top = $(window).scrollTop();
        if (scroll_top >= offset_val) {
            $(".navbar-fixed-top").addClass("top-nav-collapse");
                $(".navbar-fixed-top").removeClass("navbar-transparent");
        } else {
            $(".navbar-fixed-top").removeClass("top-nav-collapse");
          $(".navbar-fixed-top").addClass("navbar-transparent");
        }
    });

谢谢大家。

Answer 1

您发现的示例是使用Bootstrap 3，请注意Bootstrap 3和Bootstrap 4之间存在重大差异。

在bootstrap 4中，您可以添加类似.sticky-top的类以使Navbar变得粘性，并.bg-transparent使其变得透明。

这是一个有效的例子：

(function ($) {

    var navbar = $('.navbar');
    var lastScrollTop = 0;

    $(window).scroll(function () {
        var st = $(this).scrollTop();
        // Scroll down
        if (st > lastScrollTop) {
            navbar.fadeOut();
        } 
        // Scroll up but still lower than 200 (change that to whatever suits your need)
        else if(st < lastScrollTop && st > 200) {
            navbar.fadeIn();
            navbar.removeClass('navbar-light bg-transparent').addClass('navbar-dark bg-custom');
        }
        // Reached top
        else {
            navbar.removeClass('navbar-dark bg-custom').addClass('navbar-light bg-transparent');
        }
        lastScrollTop = st;
    });

})(jQuery);

/* For testing purposes */
body {
    height: 2000px;
}

/* Set your background color */
.bg-custom {
    background-color: #333
}
/* Transition effect */
.navbar {
    -webkit-transition: all .3s ease 0s;
    transition: all .3s ease 0s;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg sticky-top navbar-light bg-transparent">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home
                    <span class="sr-only">(current)</span>
                </a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true"
                    aria-expanded="false">
                    Dropdown
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Action</a>
                    <a class="dropdown-item" href="#">Another action</a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item" href="#">Something else here</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
            </li>
        </ul>
    </div>
</nav>

另请注意，您应该使用默认的WordPress jQuery，而不是在Bootstrap 4页面中链接的slim版本，该版本不包含许多功能，例如fadeIn()，fadeOut()

Bootstrap4 NavBar，向下滚动透明，向上滚动bg颜色，但在顶部之前返回透明

1 个答案: