CODEWITHSUNDEEP
javascripthtmlcss
owl12345
owl12345

Reputation: 11

background color added at specific scroll level?

I want the background of my navigation to stay transparent on the landing page, but as users scroll to the next section of the page, I want the background for the navigation to display, then collapse when they scroll back up, sort of like this (without the slide effect) http://harbr.co/heartbeat/

Upvotes: 1

Views: 115

Answers (1)

Patrick Gunderson
Patrick Gunderson

Reputation: 3281

You need to evaluate the scroll position of the element that's scrolling and you need to evaluate the position on the page of elements you want to trigger on. Here's an example with jquery, but it could also be easily done in vanilla js.

http://jsfiddle.net/gunderson/r64SR/

CSS

html,body {
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
}

section{
    height: 220px;
}

nav {
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 20px;
    border: 1px solid #888;
}

HTML

<div id="main">
    <section data-color="transparent">Section 0</section>
    <section data-color="#f60000">Section 1</section>
    <section data-color="#00f600">Section 2</section>
    <section data-color="#0000f6">Section 3</section>
    <section data-color="#ff9966">Section 4</section>
    <section data-color="#66ff99">Section 5</section>
    <section data-color="#9966ff">Section 6</section>
    <section data-color="#6699ff">Section 7</section>
</div>
<nav></nav>

JS

var $window = $(window), $nav = $('nav'), $sections = $('section')

$window.on("scroll", onScroll);

function onScroll(e){
    $sections.each(function(){
        var $section = $(this);
        if ($section.offset().top - $window.scrollTop() < 0){
            $nav.css('backgroundColor', $section.data('color'));
        }
    })
}

Upvotes: 1

Related Questions