滚动后更改颜色导航栏 [英] change color navbar after scroll

问题描述

我想在滚动时更改导航栏的颜色。当导航栏在顶部时，背景是透明的。
感谢所有人的关注，并请原谅我的英文不好！

  / * COLORE NAVBAR * /。navbar-default .navbar-toggle .icon-bar {background-color：#fff; box-shadow：1px 1px＃000;}。navbar-toggle {background-color：transparent; border：none;}。navbar-toggle：hover {background-color：transparent！重要;}。navbar-toggle：focus {background-color：transparent！重要;}。navbar-default {background-color：transparent; border-color：transparent;}。navbar-default .navbar-nav> li> a {color：#FFF; navbar-default.navbar-nav> li> a：focus，.navbar-default .navbar-nav> li> a：hover {color：red;}。navbar-default。text-shadow：1px 1px＃000;}。 navbar-nav> .active> a，.navbar-default .navbar-nav> .active> a：focus，.navbar-default .navbar-nav> .active> a：hover {background-color：yellow;}。navbar - 默认.navbar-nav> .open> a，.navbar-default .navbar-nav> .open> a：focus，.navbar-default .navbar-nav> .open> a：hover {background-color：blue; } .dropdown-menu> li> a {color：green;}。dropdown-menu> li> a：hover {background-color：brown;颜色：violet;}。navbar-brand> li> a：hover {color：white;} @ media only screen and（max-width：766px）{.collapsing，.in {background：#fff; } .collapsing ul li a，.in ul li a {color：#fff！important;向左飘浮; } .collapsing ul li a：hover，.in ul li a：hover {color：#fff！important; background-color：＃E1332D; }}  

<！ - Navigation - > < nav class =navbar navbar-default navbar-fixed-toprole =navigation> < div class =container> < div class =navbar-header page-scroll> < button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-ex1-collapse> < span class =sr-only>切换导航< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < /按钮> < a class =navbar-brand page-scrollhref =＃page-topstyle =color：white;> LUCA DELCONTE< / a> < / DIV> <！ - 收集导航链接，表单和其他内容以进行切换 - > < div class =collapse navbar-collapse navbar-ex1-collapse> < ul class =nav navbar-nav> <！ - 包含隐藏的li，用于在向上滚动时关于链接移除关于链接的活动类 - > < li class =hidden> < a class =page-scrollhref =＃page-top>< / a> < /锂> <李> < a class =page-scrollhref =＃about>< i class =fa fa-smile -oaria-hidden =true>< / i>关于< / A> < /锂> <李> < a class =page-scrollhref =＃services>< i class =fa fa-diamondaria-hidden =true>< / i>设计与LT; / A> < /锂> <李> < a class =page-scrollhref =＃work>< i class =fa fa-lightbulb -oaria-hidden =true>< / i>工作< / A> < /锂> <李> < a class =page-scrollhref =＃contact>< i class =fa fa-envelopearia-hidden =true>< / i>联系与LT; / A> < /锂> < / UL> < / DIV> <！ - /.navbar-collapse - > < / DIV> <！ - /.container - >< / nav>

=h2_lin>解决方案

jQuery

  / ** 
 *改变标题不透明类
 * / 
函数checkScroll（）{
 var startY = $（'。navbar'）。height（）* 2; （$（window）.scrollTop（）> startY）{
 $（'。navbar'）。addClass（scrolled）将导航栏的位置改变为px 
 
。 ）; 
} else {
 $（'。navbar'）。removeClass（scrolled）; （$'
} 
} 
 
 if（$（'。navbar'）。length> 0）{
 $（window）.on（scroll load resize ，function（）{
 checkScroll（）; 
}）; 
} 
  

i want to change the color of my navbar when i scroll. When the navbar is on top the background is transparent. thank's to all for the attention and excuse me for my bad english!!

/* COLORE NAVBAR */

.navbar-default .navbar-toggle .icon-bar {
  background-color: #fff;
  box-shadow: 1px 1px #000;
}
.navbar-toggle {
  background-color: transparent;
  border: none;
}
.navbar-toggle:hover {
  background-color: transparent! important;
}
.navbar-toggle:focus {
  background-color: transparent! important;
}
.navbar-default {
  background-color: transparent;
  border-color: transparent;
}
.navbar-default .navbar-nav>li>a {
  color: #FFF;
  text-shadow: 1px 1px #000;
}
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>li>a:hover {
  color: red;
}
.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
  background-color: yellow;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover {
  background-color: blue;
}
.dropdown-menu>li>a {
  color: green;
}
.dropdown-menu>li>a:hover {
  background-color: brown;
  color: violet;
}
.navbar-brand>li>a:hover {
  color: white;
}
@media only screen and (max-width: 766px) {
  .collapsing,
  .in {
    background: #fff;
  }
  .collapsing ul li a,
  .in ul li a {
    color: #fff!important;
    float: left;
  }
  .collapsing ul li a:hover,
  .in ul li a:hover {
    color: #fff !important;
    background-color: #E1332D;
  }
}

<!-- Navigation -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header page-scroll">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand page-scroll" href="#page-top" style="color: white;">LUCA DELCONTE</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
        <li class="hidden">
          <a class="page-scroll" href="#page-top"></a>
        </li>
        <li>
          <a class="page-scroll" href="#about"><i class="fa fa-smile-o" aria-hidden="true"></i> 
    About</a>
        </li>
        <li>
          <a class="page-scroll" href="#services"><i class="fa fa-diamond" aria-hidden="true"></i>
     Design</a>
        </li>
        <li>
          <a class="page-scroll" href="#work"><i class="fa fa-lightbulb-o" aria-hidden="true"></i>
     Work</a>
        </li>
        <li>
          <a class="page-scroll" href="#contact"><i class="fa fa-envelope" aria-hidden="true"></i>
     Contact</a>
        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container -->
</nav>

解决方案

jQuery

/**
 * Listen to scroll to change header opacity class
 */
function checkScroll(){
    var startY = $('.navbar').height() * 2; //The point where the navbar changes in px

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

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

这篇关于滚动后更改颜色导航栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！