向下滚动时的褪色标题 - 适用于向上滚动

问题描述：

我有一个标题，一旦开始滚动就会从透明变为蓝色。一旦您再次到达页面的顶部，标题将恢复为透明。向下滚动时的褪色标题 - 适用于向上滚动

但现在它只是跳回到透明。可能是显而易见的 - 但我能做些什么来使蓝色渐变变得透明？

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; 
 

 
} 
 

 

 
.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; 
 

 
     &:hover { 
 
      color: darken(@brand-primary,10%) !important; 
 
      background-color: transparent !important; 
 
     } 
 
    } 
 
} 
 

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

 
.navbar.navbar-inverse.scrolled { 
 
    background: #32404E; 
 
}

<!DOCTYPE html> 
 
<html lang=""> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t \t <title>Title Page</title> 
 
\t \t <!-- Bootstrap CSS --> 
 
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
     \t </head> 
 
\t <body> 
 
    <div class="navbar navbar-alt navbar-fixed-top scrolled"> 
 
     <div class="row"> 
 
      <div class="col-md-offset-1 col-md-3"> 
 
       <div class="navbar-header"> 
 
        <a href="@Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt"> 
 
         <img src="#" /> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-offset-2 col-md-5"> 
 
       <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-phone"></i> 
 
           Contact Us 
 
          </a> 
 
         </li> 
 
        </ul> 
 
        <ul class="nav navbar-nav navbar-right navbar-right-alt"> 
 
         <li> 
 
          <a href="#">Back</a> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
         
 

 

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

您是否尝试向'.navbar'添加过渡？现在只有'.navbar-inverse'的动画效果，所以当这个类被删除时...你失去了你的转换效果。 –

答

看起来像这里的问题是，当你到达页面的顶部的CSS过渡属性包含在您要添加/删除类（“导航栏逆” ）。当您添加该类时，该过渡将起作用，但删除它会使您看到的透明度发生突然变化。

相反，尝试把在一个单独的 “.navbar” 级的过渡，并删除它从 “导航栏逆”，像这样：

.navbar{ 
    transition: all .5s linear; 
}

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; 
 

 
} 
 

 

 
.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; 
 

 
     &:hover { 
 
      color: darken(@brand-primary,10%) !important; 
 
      background-color: transparent !important; 
 
     } 
 
    } 
 
} 
 

 
.navbar{ 
 
    transition: all .5s linear; 
 
} 
 

 
.navbar.navbar-inverse { 
 
    background: transparent; 
 
    border: none !important; 
 
} 
 

 
.navbar.navbar-inverse.scrolled { 
 
    background: #32404E; 
 
}

<!DOCTYPE html> 
 
<html lang=""> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t \t <title>Title Page</title> 
 
\t \t <!-- Bootstrap CSS --> 
 
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
     \t </head> 
 
\t <body> 
 
    <div class="navbar navbar-alt navbar-fixed-top scrolled"> 
 
     <div class="row"> 
 
      <div class="col-md-offset-1 col-md-3"> 
 
       <div class="navbar-header"> 
 
        <a href="@Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt"> 
 
         <img src="#" /> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-offset-2 col-md-5"> 
 
       <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-phone"></i> 
 
           Contact Us 
 
          </a> 
 
         </li> 
 
        </ul> 
 
        <ul class="nav navbar-nav navbar-right navbar-right-alt"> 
 
         <li> 
 
          <a href="#">Back</a> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
         
 

 

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

完美 - 再次感谢 – becca

答

你可以jQueryUI动画addClass() removeClass();

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

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

 
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; 
 

 
} 
 

 

 
.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; 
 

 
     &:hover { 
 
      color: darken(@brand-primary,10%) !important; 
 
      background-color: transparent !important; 
 
     } 
 
    } 
 
} 
 

 
.navbar.navbar-inverse { 
 
    background: transparent; 
 
    border: none !important; 
 
} 
 

 
.navbar.navbar-inverse.scrolled { 
 
    background: #32404E; 
 
}

<!DOCTYPE html> 
 
<html lang=""> 
 
\t <head> 
 
\t \t <meta charset="utf-8"> 
 
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
\t \t <title>Title Page</title> 
 
     
 
     <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> 
 
    
 

 
     
 
     
 
\t \t <!-- Bootstrap CSS --> 
 
\t \t <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 
 
     \t </head> 
 
\t <body> 
 
    <div class="navbar navbar-alt navbar-fixed-top scrolled"> 
 
     <div class="row"> 
 
      <div class="col-md-offset-1 col-md-3"> 
 
       <div class="navbar-header"> 
 
        <a href="@Url.Action("Index", "Home", new { area = String.Empty })" class="navbar-brand navbar-brand-alt"> 
 
         <img src="#" /> 
 
        </a> 
 
       </div> 
 
      </div> 
 
      <div class="col-md-offset-2 col-md-5"> 
 
       <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-phone"></i> 
 
           Contact Us 
 
          </a> 
 
         </li> 
 
        </ul> 
 
        <ul class="nav navbar-nav navbar-right navbar-right-alt"> 
 
         <li> 
 
          <a href="#">Back</a> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 
         
 

 

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

向下滚动时的褪色标题 - 适用于向上滚动

相关推荐