CODEWITHSUNDEEP
javascriptjqueryhtmlcss
RandomMath
RandomMath

Reputation: 691

JQuery - Add/Remove class on vertical scroll has no effect

I am trying to add and remove a class based on vertical scroll (to the navbar) but there seems to be no effect.

I want the navbar to change background color on scroll and I cant understand why it has not effect.

I have tried adding just css using $(element).css but that doesnt seem to be making a difference either

Link: 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 **/

Checks if offset is > 50 and then should add css (color:black) JQuery:

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

Upvotes: 2

Views: 1087

Answers (3)

Aziz
Aziz

Reputation: 7783

  1. Invoke the scrollTop function (scrollTop())
  2. Fix the selector: nav a instead of .nav
  3. Add else statement to restore original color

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>

Upvotes: 1

Pedram
Pedram

Reputation: 16575

Also can try this:

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

JSFiddle

Upvotes: 1

Prashant
Prashant

Reputation: 8040

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

$.fn.scrollTop is a function. You forgot to invoke it.

Upvotes: 2

Related Questions