Teste

<!doctype html>
<html><head>
        <meta charset="utf-8">
        <title>Documento sem título</title>
        <link rel="stylesheet" type="text/css" href="css/normalize.css" />
        <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
        <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"/>
        <style>
            *{
                padding: 0px;
                margin: 0px;
                box-sizing: border-box;
            }
            .header{
                width: 100%;
                height: 1000px;
                background-image: url(../6.jpg);
                background-size: cover;
            }
            .navbar{
                width: 100%;
                padding: 20px;
                position: fixed;
                top:0px;
                text-align: center;
                transition: .5s;
            }
            .navbar ul li{
                list-style-type: none;
                display: inline-block;
                padding: 10px 50px;
                color: white;
                font-size: 24px;
                font-family: sans-serif;
                cursor: pointer;
                border-radius: 10px;
            }
            .navbar ul li:hover{
                background: orange;
            }
            .box{
                width: 80%;
                height: 2000px;
                background: green;
                margin: 20px auto;

            }
        </style>
    </head>
    <body>

        <div class="header">
            <div class="navbar" id="nav">
                <ul>
                    <li>Home</li>
                    <li>Loja</li>
                    <li>Contato</li>
                    <li>Faq</li>
                </ul>
            </div>
        </div>
        <div class="box">
        </div>


        <script>
            var nav = document.getElementById('nav');
            document.body.onscroll = () => {
                if (window.pageYOffset > 100) {

                    nav.style.background = "#007bff";

                } else {
                    nav.style.background = "transparent";
                }
            }
        </script>

    </body>
</html>