2

I'm trying to create on scroll function, once the user scroll to certain point the menu add CSS background color attribute that appears.

But I'm having trouble, I believe I've used the correct scroll function usage, the syntax is also correct but the CSS() jQuery function doesn't goes to action as you can see in this codepen

How can I change CSS attribute once the user scrolling to certain point on the screen?

$(document).ready(function() {
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 100) {
      $(".top-nav").css('background', 'blue');
    } else {
      $(".top-nav").css('background', 'transparent');
    }
  });
});
html,
body {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: scroll;
  overflow-x: hidden;
}

.main {
  height: 2000px;
}

img {
  width: 100%;
}

body {
  background-color: #f7f7f7;
  transition: margin-right 0.5s, margin-left 0.5s;
}

a {
  text-decoration: none;
  color: white;
}

.wrapper {
  display: grid;
  transition: margin-right 0.5s, margin-left 0.5s;
}

.logo-red {
  color: #005aa3;
  font-size: 37px;
}


/* Top Nav Bar */

.top-nav {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  color: white;
}

.top-nav .nav-scroller {
  background-color: blue;
}

.top-nav h1 {
  padding-left: 3rem;
  font-size: 1.6rem;
}

.top-nav div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding-right: 4rem;
}

.top-nav ul {
  list-style: none;
  display: none;
}

.top-nav li {
  display: inline-block;
  padding: 0.7rem 1rem;
}

.top-nav div ul li a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  display: inline-block;
  padding: 10px 10px;
  position: relative;
}

.top-nav div ul li a:hover,
.top-nav div ul li a:focus {
  outline: none;
  color: #fff;
  transition: 0.5s all ease;
}

.top-nav div ul li a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #0068bd;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}

.top-nav div ul li a:hover:after {
  width: 100%;
  left: 0;
}


/* Burger menu */

.side-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  right: 0;
  background-color: #36454f;
  opacity: 1;
  overflow-x: hidden;
  padding: 60px 0;
  transition: width 0.5s;
  -webkit-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
  box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
}

.side-nav a {
  padding: 10px 10px 10px 30px;
  text-decoration: none;
  text-align: right;
  font-size: 5vw;
  margin: 0 20px;
  color: white;
  border-bottom: 2px #ccc solid;
  display: block;
  transition: 0.3s ease-in-out;
}

.side-nav a:hover {
  color: #fff;
  border-radius: 0.5rem;
}

.side-nav .btn-close {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 50px;
  font-weight: bold;
  border: none;
  margin-left: 0;
}

@media (max-width:1024px) {
  .top-nav {
    min-height: 4rem;
  }
  .top-nav div {
    padding-right: 1rem;
  }
  .top-nav h1 {
    padding-left: 1rem;
    padding-top: 0.6rem;
  }
}

@media (min-width:1024px) {
  #burger-menu {
    display: none;
  }
  .top-nav ul {
    display: inline;
    margin: 0;
    padding: 0;
  }
  .contact form {
    width: 50vw;
  }
  .top-nav h1 {
    padding-top: 0.3rem;
  }
}

#yd {
  font-family: 'Rubik', sans-serif;
  font-style: italic;
  color: #bdbdbd;
}

#yd {
  transition: 0.5s all ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@600&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div id="grid-wrapper" class="wrapper">
  <nav class="top-nav">
    <h1>
      <a href="#" id="logo">
        <span id="yd">yotam dahan</span>
        <span class="logo-red">.</span>
        <span id="com">COM</span>
      </a>
    </h1>
    <div>
      <ul style="direction: rtl;">
        <li><a href="#our-designs">שירותים</a></li>
        <li><a href="#about-us">תיק עבודות</a></li>
        <li><a href="#contact-form">שמור על קשר</a></li>
      </ul>
      <a href="#!" id="burger-menu" onclick="toggleSideMenu()">
        <i class="fas fa-bars" style="color: white; font-size: 22px;"></i>
      </a>
    </div>
  </nav>
  <div id="side-menu" class="side-nav">
    <a href="#!" class="btn-close" onclick="closeSideMenu()">&times;</a>
    <a href="#our-designs" onclick="closeSideMenu()">שירותים</a>
    <a href="#about-us" onclick="closeSideMenu()">תיק עבודות</a>
    <a href="#contact-form" onclick="closeSideMenu()">שמור על קשר</a>
  </div>
</div>
<div class="main"></div>

Improve this question

1 Answer 1

Reset to default
4

The issue is because you've set overflow: scroll on the body element so the window isn't scrolling, the body is. As such the event handler is on the wrong element.

Also note that you should avoid putting CSS styling (as well as HTML) in your JS code. A better approach is using CSS classes. Then you can use toggleClass(). Try this:

jQuery($ => {
  $('body').scroll(function () {
    var scroll = $(this).scrollTop();
    $('.top-nav').toggleClass('blue', scroll >= 100);
  });
});
html,
body {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: scroll;
  overflow-x: hidden;
}
.main {
  height: 2000px;
}

img {
  width: 100%;
}

body {
  background-color: #f7f7f7;
  transition: margin-right 0.5s, margin-left 0.5s;
}
a {
  text-decoration: none;
  color: white;
}

.wrapper {
  display: grid;
  transition: margin-right 0.5s, margin-left 0.5s;
}

.logo-red {
  color: #005aa3;
  font-size: 37px;
}

/* Top Nav Bar */
.top-nav {
  position: fixed;
  top: 0;
  z-index: 10;
  width: 100%;
  display: grid;
  grid-template-columns: auto auto;
  color: white;
}
.top-nav.blue {
  background-color: blue;
}
.top-nav .nav-scroller {
  background-color: blue;
}
.top-nav h1 {
  padding-left: 3rem;
  font-size: 1.6rem;
}

.top-nav div {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  padding-right: 4rem;
}

.top-nav ul {
  list-style: none;
  display: none;
}

.top-nav li {
  display: inline-block;
  padding: 0.7rem 1rem;
}
.top-nav div ul li a {
  color: #fff;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.15em;
  display: inline-block;
  padding: 10px 10px;
  position: relative;
}

.top-nav div ul li a:hover,
.top-nav div ul li a:focus {
  outline: none;
  color: #fff;
  transition: 0.5s all ease;
}
.top-nav div ul li a:after {
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #0068bd;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
.top-nav div ul li a:hover:after {
  width: 100%;
  left: 0;
}
/* Burger menu */

.side-nav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 2;
  right: 0;
  background-color: #36454f;
  opacity: 1;
  overflow-x: hidden;
  padding: 60px 0;
  transition: width 0.5s;
  -webkit-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
  box-shadow: inset 12px 0px 18px 0px rgba(0, 0, 0, 0.75);
}

.side-nav a {
  padding: 10px 10px 10px 30px;
  text-decoration: none;
  text-align: right;
  font-size: 5vw;
  margin: 0 20px;
  color: white;
  border-bottom: 2px #ccc solid;
  display: block;
  transition: 0.3s ease-in-out;
}

.side-nav a:hover {
  color: #fff;
  border-radius: 0.5rem;
}

.side-nav .btn-close {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 50px;
  font-weight: bold;
  border: none;
  margin-left: 0;
}
@media (max-width: 1024px) {
  .top-nav {
    min-height: 4rem;
  }
  .top-nav div {
    padding-right: 1rem;
  }
  .top-nav h1 {
    padding-left: 1rem;
    padding-top: 0.6rem;
  }
}

@media (min-width: 1024px) {
  #burger-menu {
    display: none;
  }

  .top-nav ul {
    display: inline;
    margin: 0;
    padding: 0;
  }

  .contact form {
    width: 50vw;
  }
  .top-nav h1 {
    padding-top: 0.3rem;
  }
}
#yd {
  font-family: "Rubik", sans-serif;
  font-style: italic;
  color: #bdbdbd;
}
#yd {
  transition: 0.5s all ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Cairo:wght@600&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/releases/v5.0.10/js/all.js"></script>
<div id="grid-wrapper" class="wrapper">
  <nav class="top-nav">
    <h1><a href="#" id="logo"><span id="yd">yotam dahan</span><span class="logo-red">.</span><span id="com">COM</span></a></h1>
    <div>
      <ul style="direction: rtl;">
        <li><a href="#our-designs">שירותים</a></li>
        <li><a href="#about-us">תיק עבודות</a></li>
        <li><a href="#contact-form">שמור על קשר</a></li>
      </ul>
      <a href="#!" id="burger-menu" onclick="toggleSideMenu()"><i class="fas fa-bars" style="color: white; font-size: 22px;"></i></a>
    </div>
  </nav>

  <div id="side-menu" class="side-nav">
    <a href="#!" class="btn-close" onclick="closeSideMenu()">&times;</a>
    <a href="#our-designs" onclick="closeSideMenu()">שירותים</a>
    <a href="#about-us" onclick="closeSideMenu()">תיק עבודות</a>
    <a href="#contact-form" onclick="closeSideMenu()">שמור על קשר</a>
  </div>
</div>
<div class="main"></div>

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you, that worked. Though I cant understand why avoiding using JS for CSS styling? I mean React is based on that no?
No problem, glad to help. I can't understand why avoiding using JS for CSS styling? It's because it's a violation of the Separation of Concerns Principle

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.