javascript - 随着用户向下滚动逐渐改变导航背景

Question

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

是否有另一种(更流畅和更现代的)方法来做到这一点？

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

仅供引用:

我不想要下拉菜单、扩展等，所以不建议使用它们。也不要判断颜色。激活器链接适用于移动设备(我有一个下拉菜单)。所以不要介意。

标记:

<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

尝试添加

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>