JQuery - 在垂直滚动上添加/删除类没有效果答案

【问题标题】：JQuery - Add/Remove class on vertical scroll has no effectJQuery - 在垂直滚动上添加/删除类没有效果
【发布时间】：2016-02-28 10:23:08
【问题描述】：

我正在尝试添加和删除基于垂直滚动的类（到导航栏），但似乎没有效果。

我希望导航栏在滚动时更改背景颜色，但我不明白为什么它没有效果。

我尝试使用 $(element).css 仅添加 css，但这似乎也没有什么影响

链接：https://jsfiddle.net/r4Lxvqps/

HTML：

<!DOCTYPE html>
<title>A</title>

    <body>
        <div class="container">
            <header class="header">
                <nav class="nav">
                    <ul>
                        <li>
                            <a href="#">Home</a>
                        </li>
                        <li>
                            <a href="#">About Me</a>
                        </li>
                        <li id="logo">
                            <a href="#">Arshdeep</a>
                        </li>
                        <li>
                            <a href="#">Portfolio</a>
                        </li>
                        <li>
                            <a href="#">Contact</a>
                        </li>
                    </ul>
                </nav>
            </header>

            <div class="home">
                <div class="container">
                    <section>

                    </section>
                    <aside>
                        <img src="assets/images/imac.png" alt=""/>
                    </aside>
                </div>
            </div>

            <div class="about">
                <div class="container">

                </div>
            </div>

            <div class="portfolio">
                <div class="container">

                </div>
            </div>

            <div class="contact">
                <div class="container">

                </div>
            </div>
        </div>

    </body>

CSS：

* {
                padding: 0px;
                margin:0 auto;
                -webkit-transition: all .2s ease-in-out;
            }

            html, body {
                height: 100%;
                font-family: 'TitilliumWeb-Regular', 'sans-serif';
            }

            body {
                min-height: 100% !important;
            }

            h1 {
                padding: 0px;
                margin:0px;
            }
            .container {
                position:relative;
                height: 100%;
            }

            nav {
                padding: 5px 0px;
                position:fixed;
                width: 100%;
                top:0;
                z-index: 9999;
                color:black;
            }

            nav > ul {
                text-align: center;
                padding: 5px 0px;
            }

            nav > ul > li {
                display: inline-block;
                vertical-align: middle;
                margin:0 15px;
            }

            nav a {
                text-decoration: none;
                color:white;
                display: block; 
            }

            nav li a:not(#logo) {
                padding: 10px 18px;
            }

            nav li:not(#logo) a {
                opacity: .7;
            }

            nav li:not(#logo) a:hover {
                opacity: 1;
            }

            #logo a {
                font-size: 30px;
            }

            .scrolled {
                background-color:white;
                color:black !important;
            }

            /** Home Page **/
            .home {
                vertical-align: top;
                background-color: #38A5DB;
                color:black;
                min-height: 100%;
                position:relative;
            }

            .home > .container {
                top: 85px;
                padding: 50px 0px;
                float:left;
                width: 100%;
                color:white;
            }

            .about, .contact, .portfolio {
                min-height: 100%;
            }

            section {
                float:left;
                width: 48%;
                position:relative;
                text-align: center;
            }

            aside {
                float:right;
                width: 50%;
            }

            aside > img {
                width: 80%;
            }

            /** About Me **/

检查偏移量是否 > 50，然后添加 css (color:black) jQuery：

$(document).ready(function() {
  $(window).scroll(function() {
    var scroll_offset = $(window).scrollTop;
    if (scroll_offset > 50) {
      $(".nav").css("color", "black");
    }
  });
});

【问题讨论】：

我会推荐一个类切换而不是使用 jQuery css() 函数。它会更灵活。
如果某人的解决方案解决了您的问题，您可能希望使用大复选框接受它作为答案。欲了解更多信息：how does accepting an answer work?

标签： javascript jquery html css

【解决方案1】：

var scroll_offset = $(window).scrollTop();

$.fn.scrollTop 是 function。你忘了调用它。

【讨论】：

【解决方案2】：

也可以试试这个：

$(window).scroll(function() {
  if ($(window).scrollTop() >= 50) {
$(".nav ul li a").css("color", "black");
  } else {
  $(".nav ul li a").css("color", "white");
  }
});

JSFiddle

【讨论】：

【解决方案3】：

调用scrollTop函数(scrollTop())
修复选择器：nav a 而不是 .nav
添加else声明恢复原色

jsFiddle demo

$(document).ready(function() {
  $(window).scroll(function() {
    var scroll_offset = $(window).scrollTop();
    //alert(scroll_offset);
    if (scroll_offset > 50) {
      $("nav a").css("color", "black");
    } else {
      $("nav a").css("color", "white");
    }
  });
});

* {
  padding: 0px;
  margin: 0 auto;
  -webkit-transition: all .2s ease-in-out;
}

html,
body {
  height: 100%;
  font-family: 'TitilliumWeb-Regular', 'sans-serif';
}

body {
  min-height: 100% !important;
}

h1 {
  padding: 0px;
  margin: 0px;
}

.container {
  position: relative;
  height: 100%;
}

nav {
  padding: 5px 0px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 9999;
  color: black;
}

nav > ul {
  text-align: center;
  padding: 5px 0px;
}

nav > ul > li {
  display: inline-block;
  vertical-align: middle;
  margin: 0 15px;
}

nav a {
  text-decoration: none;
  color: white;
  display: block;
}

nav li a:not(#logo) {
  padding: 10px 18px;
}

nav li:not(#logo) a {
  opacity: .7;
}

nav li:not(#logo) a:hover {
  opacity: 1;
}

#logo a {
  font-size: 30px;
}

.scrolled {
  background-color: white;
  color: black !important;
}


/** Home Page **/

.home {
  vertical-align: top;
  background-color: #38A5DB;
  color: black;
  min-height: 100%;
  position: relative;
}

.home > .container {
  top: 85px;
  padding: 50px 0px;
  float: left;
  width: 100%;
  color: white;
}

.about,
.contact,
.portfolio {
  min-height: 100%;
}

section {
  float: left;
  width: 48%;
  position: relative;
  text-align: center;
}

aside {
  float: right;
  width: 50%;
}

aside > img {
  width: 80%;
}


/** About Me **/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <header class="header">
      <nav class="nav">
        <ul>
          <li>
            <a href="#">Home</a>
          </li>
          <li>
            <a href="#">About Me</a>
          </li>
          <li id="logo">
            <a href="#">Arshdeep</a>
          </li>
          <li>
            <a href="#">Portfolio</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </nav>
    </header>

    <div class="home">
      <div class="container">
        <section>

        </section>
        <aside>
          <img src="assets/images/imac.png" alt="" />
        </aside>
      </div>
    </div>

    <div class="about">
      <div class="container">

      </div>
    </div>

    <div class="portfolio">
      <div class="container">

      </div>
    </div>

    <div class="contact">
      <div class="container">

      </div>
    </div>
  </div>

【讨论】：