Theodore Steiner Theodore Steiner - 1 year ago 163
CSS Question

Vanilla JS Box Shadow on Scroll

I've been learning vanilla JS and most of the solutions to this problem are jquery dependent and I find myself getting a little muddled. (This is not a js over jq argument I am looking for a specific solution).

I am attempting to create a box shadow that activates on a fixed position menu as it scrolls.

If I capture the header element in a variable,

var header = document.getElementById("header");

and then add the scroll event to it:

header.onscroll = function(){};

What am I checking for at this point? The y-offset?

Answer Source

This should help

window.onscroll = function() {myFunction()};

function myFunction() {
    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
        document.getElementById("fixedMenu").className = "myFixedMenu-box-shadow";
    } else {
        document.getElementById("fixedMenu").className = "myFixedMenu";
height: 900px;
width : 100%;
height: 70px;
background-color: black;
position: fixed;}

  width : 100%;
height: 70px;
background-color: orange;
  position: fixed;
  box-shadow: 0px 0px 5px 5px #e1e1e1;
<div class="myFixedMenu" id="fixedMenu">
Some Menu Item

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download