CODEWITHSUNDEEP
javascripthtmlgetelementbyidgetelementsbyclassnamegetelementsbytagname
MUB
MUB

Reputation: 13

Unable to style 'ul > li' elements using : document.getElementById() / ClassName() / TagName() / etc

function myFunction(e) {
  if (e.deltaY > 0) {
    let nav = document.getElementById('navbar').style;
    let navImg = document.getElementById('navBrand').style;

    nav.height = '6vh';
    nav.backgroundColor = '#00570e';
    nav.fontSize = '1vh';

    navImg.width = '4vh';
    navImg.height = '4vh';

  } else if (e.deltaY < 0) {

    document.getElementById('navbar').style = '';
    document.getElementById('navBrand').style = '';

  }
  document.getElementById("demo").innerHTML = "DeltaY value : " + e.deltaY;
}
body {
  height: 200vh;
  margin-top: 15vh;
}

#navbar {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 10vh;
  background-color: green;
  transition: 0.3s ease;
  box-shadow: 0px 3px 15px #00000050;
}

#navbar>img {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 1vh;
  left: 3vw;
  transition: 0.3s ease;
}

li {
  display: flex;
  margin-right: 3vw;
  color: white;
  font-family: Trebuchet MS;
  font-size: 1rem;
  float: right;
  text-align: left;
  transition: 0.3s ease;
}
<!DOCTYPE html>
<html>

<body onwheel="myFunction(event)">

  <div id="navbar">
    <img id="navBrand" src="https://rb.gy/0sjhmw">
    <ul>
      <li>Bottom</li>
      <li>Top</li>
      <li>Home</li>
    </ul>
  </div>

  <h1>Some Heading</h1>

  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </p>

  <br>
  <p id="demo"></p>

</body>
</html>

I am trying to shrink/expand the Navbar and its elements depending upon the scroll direction (using e.deltaY).

All works well except the ul > li elements. They simply doesn't want to change their fontSize or color or any other styling attributes.

I have tried everything as mentioned in the title ;

document.getElementById()
document.getElementsByClassName()
document.getElementsByTagName()
//etc.

While scrolling up:

enter image description here

While scrolling down:

enter image description here

This is the maximum target I've achieved, but it would be better if I were able to shrink & expand the fontSize or alter styling of the text as well!

Upvotes: 0

Views: 83

Answers (1)

MaxInteg
MaxInteg

Reputation: 49

Did you try document.querySelectorAll('li').forEach(...) ?

Upvotes: -1

Related Questions