CODEWITHSUNDEEP
javascripthtmlcss
Jarek S. Uchmanowicz
Jarek S. Uchmanowicz

Reputation: 49

How to make sticky navigation change colour when scrolling past a certain div?

I am curious as to how you would make your sticky navigation bar fade into a colour as you scroll down to a certain point or DIV on the page.

I would like to have this so I can see the white over the white background when I scroll to the end of my div or at the beginning of the div.

One of my issues is not being able to get the JS to work as well as having my background image inserted into my css... header {} with a width... how do I target just the logo (on the left) and the navagation bar on the right... so a transparent bar appears underneath the two, taking up a desired height and 100% width of the page without messing up the background image!

Also in codepen you'll notice that the header... which changes color goes underneath the main div.

Here is my codepen...

http://codepen.io/uchmanowicz/pen/qEebbN

Thank you!

HTML

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>Aesthetic Media</title>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,500' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="styles.js"></script>
</head>

<body>

<header>

    <a class="logo" href="#">Aesthetic</a>

    <nav>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
    </nav

    <div class="clears"></div>

    <div class="maintext">

        <h1>We're Aesthetic</h1>
        <h2>A Visual Agency from Niagara</h2>

    </div>

</header>

<main>

<h2 class="whatwedo">Expertise</h2>
<div class="whatwedobox one"><div class="icon"></div><p>Lorem ipsum dolor sit  amet.</p></div>
<div class="whatwedobox two"></div>
<div class="whatwedobox three"></div>

</main>

<footer></footer>

<script   src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">          </script>
</body>
</html>

CSS

* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}

body {
background: white;
}

header {
width: 100%;
height: 550px;
background: white;
background: url('images/main.jpg') center center;
background-size: cover;
padding: 30px 30px 30px 30px;
position: relative;
}

.logo {
position: fixed;
top: 33px;
left: 30px;
width: 200px;
height: 80px;
display: block;
float: left;
z-index: 30;
font-size: 1.8em;
font-weight: 800;
text-decoration: none;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 5px;  
}

.logo a {
font-size: 1.8em;
font-weight: 800;
text-decoration: none;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 5px;
}

nav {
float: right;
z-index: 30;
position: fixed;
top: 20px;
right: 0px;
letter-spacing: .2em;
}

nav li {
float: left;
list-style: none;
padding: 10px 15px 10px 15px;
}

nav li:last-child {
border-right: none;
}

nav li a {
padding: 5px 10px 5px 10px;
color: white;
display: block;
font-weight: 400;
text-decoration: none;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
text-transform: uppercase;
-webkit-font-smoothing: antialiased;
}

nav li a:hover {
background-color: rgba(40, 40, 40, 0.5);
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
-transition: all .3s ease;
-webkit-transition: all .3s ease;
-webkit-font-smoothing: antialiased;
}

.clears {
clear: both;
}

.maintext {
margin: auto;
width: 600px;
text-align: center;
margin-top: 200px;
color: white;
z-index: 30;
position: relative;
}

.maintext h1 {
font-weight: 600;
font-size: 1.8em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}

.maintext h2 {
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
text-align: center;
color: #FFFFFF;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
padding-bottom: 15px;
}

main {
max-width: 1180px;
margin: auto;
margin-top: 20px;
overflow: hidden;
}

h2.whatwedo {
text-align: center;
font-weight: 400;
font-size: 1.7em;
line-height: 1.2em;
text-transform: uppercase;
letter-spacing: .1em;
color: #000000;
font-family: 'Raleway' , sans-serif, Helvetica, Verdana;
-webkit-font-smoothing: antialiased;
}

.whatwedobox {
width: 30%;
height: 300px;
border: 1px solid blue;
float: left;
margin-right: 5%;
padding: 20px;
margin-top: 20px;
}

.whatwedobox:last-child {
margin-right: 0%;
}

.icon {
width: 100%;
height: 100px;
background: url(#) no-repeat center center;
}

JS

$(document).ready(function(){       
var scroll_start = 0;
var startchange = $(".maintext");
var offset = startchange.offset();

 if (startchange.length){
 $(document).scroll(function() { 
  scroll_start = $(this).scrollTop();
  if(scroll_start > offset.top) {
      $("header").css('background-color', '#B5B5B5');
   } else {
      $('header').css('background-color', 'transparent');
   }
});
}
});

Upvotes: 3

Views: 6728

Answers (1)

Stickers
Stickers

Reputation: 78686

I think what you meant to have is the sticky navbar, and changing background when the main content reaches it on scroll. See the updated code and the pen demo as follows.

$(document).ready(function () {
    var scroll_start = 0;
    var startchange = $(".maintext");
    var offset = startchange.offset();

    if (startchange.length) {
        $(document).scroll(function () {
            scroll_start = $(this).scrollTop();
            if (scroll_start > offset.top) {
                $("nav").css('background-color', 'rgba(0,0,0,.75)');
            } else {
                $('nav').css('background-color', 'transparent');
            }
        });
    }
});
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    background: #666;
    min-height: 5000px;
}
header {
    /* background-image: url('images/main.jpg'); */
    background-position: center center;
    background-size: cover;
    position: relative;
}
nav {
    position: fixed;
    width: 100%;
    top: 0;
    right: 0;
    z-index: 1;
    letter-spacing: .2em;
    line-height: 1;
    padding: 30px;
}
nav ul {
    text-align: right;
    list-style: none;
    padding: 0;
    margin: 0;
}
nav li {
    padding: 0 10px;
    display: inline-block;
}
nav li:last-child {
    border-right: none;
}
nav li a {
    padding: 10px;
    color: white;
    display: block;
    font-weight: 400;
    text-decoration: none;
    color: #FFFFFF;
    font-family:'Raleway', sans-serif, Helvetica, Verdana;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
}
nav li a:hover {
    background-color: rgba(40, 40, 40, 0.5);
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    -ms-transition: all .3s ease;
    -transition: all .3s ease;
    -webkit-transition: all .3s ease;
    -webkit-font-smoothing: antialiased;
}
.logo {
    width: 200px;
    display: block;
    float: left;
    font-size: 1.8em;
    font-weight: 800;
    text-decoration: none;
    color: #FFFFFF;
    font-family:'Raleway', sans-serif, Helvetica, Verdana;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 5px;
}
.logo a {
    font-size: 1.8em;
    font-weight: 800;
    text-decoration: none;
    color: #FFFFFF;
    font-family:'Raleway', sans-serif, Helvetica, Verdana;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 5px;
}
.clears {
    clear: both;
}
.maintext {
    padding-top: 90px;
    margin: 200px auto;
    width: 600px;
    text-align: center;
    color: white;
}
.maintext h1 {
    font-weight: 600;
    font-size: 1.8em;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #FFFFFF;
    font-family:'Raleway', sans-serif, Helvetica, Verdana;
    padding-bottom: 15px;
}
.maintext h2 {
    font-weight: 400;
    font-size: 1.7em;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: .1em;
    text-align: center;
    color: #FFFFFF;
    font-family:'Raleway', sans-serif, Helvetica, Verdana;
    padding-bottom: 15px;
}
main {
    max-width: 1180px;
    margin: auto;
    margin-top: 20px;
    overflow: hidden;
}
.whatwedohd {
    text-align: center;
    font-weight: 400;
    font-size: 1.7em;
    line-height: 1.2em;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #000000;
    font-family:'Raleway', sans-serif, Helvetica, Verdana;
    -webkit-font-smoothing: antialiased;
}
.whatwedobox {
    width: 30%;
    height: 300px;
    border: 1px solid blue;
    float: left;
    margin-right: 5%;
    padding: 20px;
    margin-top: 20px;
}
.whatwedobox.three {
    margin-right: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<header>
    <nav>
        <a class="logo" href="#">Aesthetic</a>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Gallery</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <div class="maintext">
         <h1>We're Aesthetic</h1>
         <h2>A Visual Agency from Niagara</h2>
    </div>
</header>

<main>
    <h2 class="whatwedohd">Expertise</h2>
    <div class="whatwedobox one"></div>
    <div class="whatwedobox two"></div>
    <div class="whatwedobox three"></div>
</main>

<footer></footer>

Pen Demo: http://codepen.io/anon/pen/qEemdp

Upvotes: 1

Related Questions