滚动/调整大小时导航栏从透明变为黑色 - 加载？

时间：2016-06-08 15:59:00

标签： javascript jquery html twitter-bootstrap

所以我有一个JS，它允许我让我的导航栏从屏幕顶部的透明变为黑色，一旦你开始滚动。 但是，使用此脚本我的页面加载（在刷新时为ex）并且条形图从黑色开始并慢慢淡化为透明。 如何编辑此代码，以便在加载（AT TOP）时，条形图始终是透明的。只有滚动或调整大小才会发生变化。

**请不要指出我在JS中有“加载”..没有这个它从黑色开始直到我向下滚动然后再回到顶部。

function checkScroll() {
  var startY = $('.navbar').height() * 1; //The point where the navbar changes in px

  if ($(window).scrollTop() > startY) {
    $('.navbar').addClass("navbar-inverse");
  } else {
    $('.navbar').removeClass("navbar-inverse");
  }
}

if ($('.navbar').length > 0) {
  $(window).on("scroll load resize", function() {
    checkScroll();
  });
}
body {
  height: 1000px;
}

.btn-gs {
  background: blue;
  border: 2px solid blue;
  padding: 5px 23px !important;
  border-radius: 25px;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 25px;
  color: #fff !important;
  text-transform: uppercase;
  &.btn-gs-lg {
    padding: 10px 33px !important;
    .transition(background-color ease .3s);
    &: hover {
      background-color: transparent;
    }
  }
  &.btn-gs-lg-alt {
    padding: 10px 33px !important;
    .transition(background-color ease .3s);
    &: hover {
      background-color: lighten(blue, 10%);
    }
  }
}
.navbar.navbar-inverse {
  background: transparent;
  transition: all .5s linear;
  border: none !important;
}
.navbar.navbar-inverse.scrolled {
  background: black;
}
.navbar-alt {
  height: 80px;
}
.navbar-brand-alt {
  padding: 0;
}
.navbar-signup {
  margin-top: 3px;
  margin-left: 10px;
}
.navbar-right-alt {
  position: static !important;
  padding-top: 20px !important;
  a {
    color: #fff !important;
    font-size: 16px !important;
    text-transform: uppercase;
    &: hover {
      color: darken(blue, 10%) !important;
    }
  }
}
<!DOCTYPE html>
<html lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Title Page</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
</head>

<body>
  <div class="navbar navbar-inverse navbar-alt navbar-fixed-top scrolled">
    <div class="container">
      <div class="navbar-header">
        <a href="#" class="navbar-brand navbar-brand-alt">
          <img src="#" />
        </a>
      </div>
      <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#o-navbar-collapse" aria-expanded="false">
        <span class="sr-only">Toggle Navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <div class="navbar-collapse collapse" id="o-navbar-collapse" aria-expanded="false" style="height:1px;">
        <ul class="nav navbar-nav navbar-right navbar-signup">
          <li>
            <a href="#" class="btn-gs">
              <i class="fa fa-paper-plane-o"></i>
              Free Trial
            </a>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right navbar-right-alt">
          <li>
            <a href="#home">Home</a>
          </li>
          <li>
            <a href="#features">Features</a>
          </li>
          <li>
            <a href="#faq">FAQ</a>
          </li>
          <li>
            <a href="#pricing">Pricing</a>
          </li>
        </ul>
      </div>
    </div>
  </div>

</html>

TIA。

1 个答案:

答案 0 :(得分：3)

问题是div中的类navbar-inverse。

bootstarp在使用此类的元素上应用blackbackground颜色。

你应该从html中删除这个类，并在脚本中使用下面的代码。

希望这有帮助。

 if ($(window).scrollTop() > startY) {
$('.navbar').addClass("navbar-inverse");} else {
$('.navbar').removeClass("navbar-inverse");}

更新后的摘录

＆＃13;
＆＃13; 
function checkScroll() {
    var startY = $('.navbar').height() * 1; //The point where the navbar changes in px

    if ($(window).scrollTop() > startY) 
    {
       $(".navbar").fadeIn(1, function() {
         $(this).css({opacity: 1.0}); 
         $(this).addClass("navbar-inverse")
       });
    }
    else 
    {
      $(".navbar").fadeIn(1000, function() {
        if($(window).scrollTop() <= startY)
        {
        $(this).fadeOut(1000, function()
          {
           $(this).css({opacity: 1.0});            $(this).removeClass("navbar-inverse")
        });
        }

       });
    }
}

if ($('.navbar').length > 0) {
    $(window).on("scroll load resize", function () {
        checkScroll();
    });
}
＆＃13; 
body {
  height:1000px;
    }

.btn-gs {
    background: blue;
    border: 2px solid blue;
    padding: 5px 23px !important;
    border-radius: 25px;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 25px;
    color: #fff !important;
    text-transform: uppercase;

}


.navbar-alt {
    height: 80px;
}

.navbar-brand-alt {
    padding: 0;
}

.navbar-signup {
    margin-top: 3px;
    margin-left: 10px;
}

.navbar-right-alt {
    position: static !important;
    padding-top: 20px !important;

    a {
        color: #fff !important;
        font-size: 16px !important;
        text-transform: uppercase;

        &:hover {
            color: darken(@blue,10%) !important;
        }
    }
}

.navbar.navbar-inverse {
    background: transparent;
    transition: all .5s linear;
    border: none !important;
}

.navbar.navbar-inverse.scrolled {
    background: black;
}
＆＃13; 
<!DOCTYPE html>
<html lang="">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Title Page</title>
		<!-- Bootstrap CSS -->
		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
      	</head>
	<body>
      <div class="navbar  navbar-alt navbar-fixed-top scrolled">
        <div class="container">
            <div class="navbar-header">
                    <a href="#" class="navbar-brand navbar-brand-alt">
                        
                    </a>
            </div>
            <button type="button" class="navbar-toggle collapse" data-toggle="collapse" data-target="#my-navbar-collapse" aria-expanded="false">
                <span class="sr-only">Toggle Navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <div class="navbar-collapse collapse" id="my-navbar-collapse" aria-expanded="false" style="height:1px;">
                <ul class="nav navbar-nav navbar-right navbar-signup">
                    <li>
                        <a href="#" class="btn-gs">
                            <i class="fa fa-paper-plane-o"></i>
                            Free Trial
                        </a>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right navbar-right-alt">
                    <li>
                        <a href="#home">Home</a>
                    </li>
                    <li>
                        <a href="#features">Features</a>
                    </li>
                    <li>
                        <a href="#faq">FAQ</a>
                    </li>
                    <li>
                        <a href="#pricing">Pricing</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
<section class="page-section page-section-xlg bs-bg" id="home">
    <div class="container">
        <div class="row wrap wrap-alt">
            <div class="col-md-offset-6 col-md-6">
                <h1 class="text-white heading-responsive largest">LOREM IPSUM</h1>
                <h4 class="subheading subheading-md subheading-md-white thin">LOREM IPSUM DOLOR SIT AMET. LOREM IPSUM DOLOR SIT AMET.</h4>
                <br />
                <a href="#" class="btn-gs btn-gs-lg text-normalize">
                    <i class="fa fa-paper-plane-o"></i>
                    Free Trial
                </a>
            </div>
        </div>
    </div>
</section>

		<script src="http://code.jquery.com/jquery.js"></script>
		<!-- Bootstrap JavaScript -->
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题