html - 导航栏初始透明并在滚动后应用线性渐变

Question

我正在研究 Bootstrap 的导航栏，并尝试在页面加载时实现透明导航栏，当您向下滚动时，导航栏会变为线性背景。

用于导航栏的代码:

<nav class="navbar navbar-expand-lg bgdefault fixed-top navbar-transparent" color-on-scroll="500"> 
</nav>

我使用 SASS 将样式应用到导航栏:

$bgDefault      : #013e75;
  @mixin bg-gradient(){
    background: rgb(95,139,178); 
    background: linear-gradient(90deg, rgba(95,139,178,1) 0%, rgba(1,72,136,1) 55%, rgba(1,62,117,1) 100%);
  }
  $bgHighlight    : #5f8bb2;
  $colDefault     : #ecf0f1;
  $colHighlight   : #ffbbbc;
  $dropDown       : false;

  .navbar {
    @include bg-gradient();
    .navbar-brand {
      color: $colDefault;
      &:hover, &:focus {
        color: $colHighlight; }}
    .navbar-text {
      color: $colDefault; 
      a {
        color: $colHighlight;
        &:hover, &:focus {
          color: $colHighlight; }}}
    .navbar-nav {
      .nav-link {
        color: $colDefault;
        border-radius: .25rem;
        margin: 0 0.25em;
        &:not(.disabled) {
          &:hover, &:focus {
            color: $colHighlight; }}}
      @if ($dropDown) {
        .dropdown-menu {
          background-color: $bgDefault;
          border-color: $bgHighlight;
          .dropdown-item {
            color: $colDefault;
            &:hover, &:focus, &.active {
              color: $colHighlight;
              background-color: $bgHighlight; }}
          .dropdown-divider {
            border-top-color: $bgHighlight; }}}
      .nav-item.active, .nav-item.show {
        .nav-link, .nav-link:hover, .nav-link:focus {
          color: $colHighlight;
          background-color: $bgHighlight; }}}
    .navbar-toggle {
      border-color: $bgHighlight;
      &:hover, &:focus {
        background-color: $bgHighlight; }
      .navbar-toggler-icon {
        color: $colDefault; }}
    .navbar-collapse,
    .navbar-form {
      border-color: $colDefault; }
    .navbar-link {
      color: $colDefault;
      &:hover {
        color: $colHighlight; }}}
  @media (max-width: 575px) {
    .navbar-expend-sm .navbar-nav .show .dropdown-menu {
      .dropdown-item {
        color: $colDefault;
        &:hover, &:focus {
          color: $colHighlight; }}
      .dropdown-item.active {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
  @media (max-width: 767px) {
    .navbar-expend-md .navbar-nav .show .dropdown-menu {
      .dropdown-item {
        color: $colDefault;
        &:hover, &:focus {
          color: $colHighlight; }}
      .dropdown-item.active {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
  @media (max-width: 991px) {
    .navbar-expend-lg .navbar-nav .show .dropdown-menu {
      .dropdown-item {
        color: $colDefault;
        &:hover, &:focus {
          color: $colHighlight; }}
      .dropdown-item.active {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
  @media (max-width: 1199px) {
    .navbar-expend-xl .navbar-nav .show .dropdown-menu {
      .dropdown-item {
        color: $colDefault;
        &:hover, &:focus {
          color: $colHighlight; }}
      .dropdown-item.active {
        color: $colHighlight;
        background-color: $bgHighlight; }}}
  .navbar-expend .navbar-nav .show .dropdown-menu {
    .dropdown-item {
      color: $colDefault;
      &:hover, &:focus {
        color: $colHighlight; }}
    .dropdown-item.active {
      color: $colHighlight;
      background-color: $bgHighlight; }}

所以基本上，当页面加载或滚动到页面顶部时，我希望基于“navbar-transparent”的透明导航栏并查看文档导航栏的更改是由“bgdefault”实现的.

有没有想过如何绕过这种行为？

Answer 1

伙计!

在 javascript 中查看这段代码:

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
    var currentScrollpos = window.pageYOffset;

    if (prevScrollpos > currentScrollpos) {
        document.getElementById("navbar").style.top = "0";
        document.getElementById("navbar").style.backgroundColor = "#000000";
    }
    else {
        document.getElementById("navbar").style.top = "-100px";
        document.getElementById("navbar").style.backgroundColor = "transparent";
    }
    prevScrollpos = currentScrollpos;
}

只需将它传递到一个 .js 文件中，然后将其调用到您的 html 中。