时间戳

首页 > 解决方案 > 导航栏初始透明并在滚动后应用线性渐变

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

问题描述

我正在开发 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”实现的。

有没有想过如何解决这种行为？

标签： htmlcsstwitter-bootstrapsassnavbar

解决方案

男人！

在 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中。

推荐阅读