Question

所以我想让这个简单的导航逐渐从背景透明变为背景亮绿色。我有了使用$（window）.scrollTop（）jQuery函数来获取距离顶部的距离并将其除以10以获得平滑过渡的想法，但是当我在chrome和firefox中运行时，它仍然感觉有点活泼。 / p>

还有另一种（更流畅，更现代）的方式吗？

我真的想让设计非常简单，以引导平面设计艺术，并为网站提供许多功能，使其具有简单但实用的现代氛围。

供参考：

我不想要下拉，扩展等所以不要暗示它们。也不要判断颜色。激活器链接用于移动（我有一个下拉列表）。所以不要介意它。

标记：

<nav>
                <a id="activator"></a>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Courses</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Log out</a></li>
                </ul>
    </nav>

风格：

<style>
nav{
    position: fixed;
    width: 100%;
    z-index: 2;
    height: 2em;
}
nav ul{
    overflow: hidden;
    background: #1adc8c;
    height: auto;
}
nav ul li{
    float: none;
    text-align: center;
    width: 100%;
    margin: 0%;
    padding: 0px;
    font-weight: bold;
    font-size: 1.1em;
}
nav ul li a{
    display: block;
    color: #FFF;
    text-decoration: none;
    font-family: sans-serif;
    font-size: 1.2em;
    padding: 20px;
}
</style>

JQ和JS：

if(window.innerWidth > 400){
        $(window).scroll(function(){
        var fromTop = $(this).scrollTop();
        if(fromTop >= 100){
            $("nav").css({
                "background" : "rgba(26, 220, 140,0." + fromTop/10 + ")"
            });
            if(fromTop >= 600){
                $("nav").css({
                    "background" : "rgba(26,220,140,1)"
                });
            }
        }else{
            $("nav").css({
                "background" : ""
            }); 
        }
        });
    }

Answer 1

根据您滚动的距离，您可能最好只需切换一个CSS类（例如.alternative）。这与CSS transition结合使用可以让您顺利过渡。

请参阅以下代码段以获取此工作示例。

＆＃13;

$(window).scroll(function() {
  var fromTop = $(this).scrollTop()
  if (fromTop >= 100) {
    $('nav').addClass('alternative')
  } else {
    $('nav').removeClass('alternative')
  }
})

＆＃13;

nav {
  position: fixed;
  width: 100%;
  z-index: 2;
  height: 2em;
  background-color: transparent;
  transition: background-color 0.5s;
}

nav.alternative {
  background-color: #1adc8c;
}

nav ul {
  overflow: hidden;
  background: #1adc8c;
  height: auto;
}

nav ul li {
  float: none;
  text-align: center;
  width: 100%;
  margin: 0%;
  padding: 0px;
  font-weight: bold;
  font-size: 1.1em;
}

nav ul li a {
  display: block;
  color: #FFF;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 1.2em;
  padding: 20px;
}

.spacer {
  min-height: 500px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <a id="activator"></a>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Courses</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">Log out</a></li>
  </ul>
</nav>

<div class="spacer"></div>

＆＃13;

Answer 2

尝试添加

transition: all 200ms; 
will-change: background;

属性给你nav类，使其看起来很流畅。您可以在codepen 1，2，3

上看到这些示例

if (window.innerWidth > 400) {
  $(window).scroll(function() {
    var fromTop = $(this).scrollTop();
    if (fromTop >= 100) {
      $("nav").css({
        "background": "rgba(26, 220, 140,0." + fromTop / 10 + ")"
      });
      if (fromTop >= 600) {
        $("nav").css({
          "background": "rgba(26,220,140,1)"
        });
      }
    } else {
      $("nav").css({
        "background": ""
      });
    }
  });
}

.long-div {
  height: 500vh;
}

nav {
  position: fixed;
  width: 100%;
  z-index: 2;
  height: 4em;
  transition: all 500ms;
  will-change: background;
}

nav ul {
  overflow: hidden;
  width: 100%;
  height: auto;
  list-style-type: none;
}

nav ul li {
  float: left;
  text-align: center;
  margin: 0%;
  padding: 0px;
  font-weight: bold;
  font-size: 1.1em;
}

nav ul li a {
  display: block;
  color: #000;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 1.2em;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav>
  <a id="activator"></a>
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">Courses</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
    <li>
      <a href="#">Log out</a>
    </li>
  </ul>
</nav>
<div class="long-div">
</div>

当用户向下滚动时，逐渐改变导航的背景

2 个答案: