Изменение цвета фона навигации при прокрутке вверх JQUERY

Question

Я довольно новичок в JQuery, и я пытаюсь создать навигацию, которая скрывается при прокрутке вниз и появляется с черным фоном при прокрутке вверх.

Я достиг этого до сих пор, но теперь я хочу, чтобы цвет фона моей навигации менялся от черного назад до прозрачного при прокрутке назад к самой верхней части страницы.

Вот мой прогресс - http://dwaynecrawford.com/testblog/

Я хочу, чтобы достичь эффекта, идентичную этой навигации - http://www.undsgn.com/uncode/when-you-are-alone/

Вот мой код:

/*  Hide Navbar */ 
 
// Hide Header on on scroll down 
 
var didScroll; 
 
var lastScrollTop = 1; 
 
var delta = 5; 
 
var navbarHeight = $('nav').outerHeight(); 
 

 
$(window).scroll(function(event) { 
 
    didScroll = true; 
 
}); 
 

 
setInterval(function() { 
 
    if (didScroll) { 
 
    hasScrolled(); 
 
    didScroll = false; 
 
    } 
 
}, 250); 
 

 
function hasScrolled() { 
 
    var st = $(this).scrollTop(); 
 

 
    // Make sure they scroll more than delta 
 
    if (Math.abs(lastScrollTop - st) <= delta) 
 
    return; 
 

 
    // If they scrolled down and are past the navbar, add class .nav-up. 
 
    // This is necessary so you never see what is "behind" the navbar. 
 
    if (st > lastScrollTop && st > navbarHeight) { 
 
    // Scroll Down 
 
    $('nav').removeClass('nav-down').addClass('nav-up'); 
 
    } else { 
 
    // Scroll Up 
 
    if (st + $(window).height() < $(document).height()) { 
 
     $('nav').removeClass('nav-up').addClass('nav-down, nav-blk'); 
 
    } 
 
    } 
 

 
    lastScrollTop = st; 
 
}

body{ 
 
    background-color: #ababab; 
 
} 
 
nav { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    /*text-align: center; 
 
    display: inline;*/ 
 
    display: table; 
 
    vertical-align: middle; 
 
    text-align: center; 
 
    position: fixed; 
 
    height: auto; 
 
    opacity: 1.8; 
 
    word-spacing: 20px; 
 
    /*border-bottom: #5c5c5c solid 1px;*/ 
 
    height: 5vh; 
 
} 
 
nav a { 
 
    text-decoration: none; 
 
    color: #fff; 
 
} 
 
nav a:hover { 
 
    color: #9f9f9f; 
 
    font-weight: 700; 
 
} 
 
nav a:visited { 
 
    color: #fff; 
 
} 
 
.nav { 
 
    position: fixed; 
 
    top: 0px; 
 
    color: #fff; 
 
    padding-top: 15px; 
 
    padding-bottom: 0px; 
 
    text-transform: uppercase; 
 
    font-size: .75em; 
 
    transition: top 0.2s ease-in-out; 
 
    z-index: 1; 
 
} 
 
.nav-up { 
 
    top: -10vh; 
 
} 
 
.nav-blk { 
 
    background-color: #000; 
 
    opacity: .7; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav class="nav hideme nav-down"> 
 

 
    <article class="navlogo">Navigation</article> 
 
    <article class="navigation"> 
 
    <ul> 
 
     <li><a href="#head">Home</a> 
 
     </li> 
 
     <li><a href="#about">About</a> 
 
     </li> 
 
     <li><a href="#work">Work</a> 
 
     </li> 
 
     <li><a href="#team">Blog</a> 
 
     </li> 
 
     <li><a href="#contact">Contact</a> 
 
     </li> 
 
    </ul> 
 

 
    </article> 
 

 
</nav>

Answer 1

Попробуйте это :

$(document).ready(function() { 
    $(window).scroll(function() { 

    if($(window).scrollTop() > 1) { 
    // your code 
    } 

}); 
}); 

Answer 2

Вы считаете это неправильным способом. scroll Событие запускается при каждом прокрутке. Нет смысла добавлять функцию, которая запускается каждые 250 мс (то есть нет необходимости в setInterval), чтобы проверить, прокручивается ли она.

Просто замените весь ваш JS по:

$(window).scroll(function() { 
    var currentScroll = $(document).scrollTop(); // the current scrollTop position 
    var navbarHeight = $('nav').outerHeight(); 

    if (currentScroll > navbarHeight) { 
     $('nav').removeClass('nav-down').addClass('nav-up'); 
    } else { 
     $('nav').removeClass('nav-up').addClass('nav-down nav-blk'); 
    } 
}); 

Более подробную информацию о scrollTop(): check the doc

Answer 3

Edit своим ЯШ: добавить класс nav-top при $(window).scrollTop() == 0, иначе удалить класс.

function hasScrolled() { 
    var st = $(this).scrollTop(); 


    if(st == 0){ 
    $('nav:not(:nav-top)').addClass("nav-top"); 
    } 
    else{ 
    $('nav').removeClass("nav-top"); 
    } 

    // Make sure they scroll more than delta 
    if (Math.abs(lastScrollTop - st) <= delta) 
    return; 

    // If they scrolled down and are past the navbar, add class .nav-up. 
    // This is necessary so you never see what is "behind" the navbar. 
    if (st > lastScrollTop && st > navbarHeight) { 
    // Scroll Down 
    $('nav').removeClass('nav-down').addClass('nav-up'); 
    } else { 
    // Scroll Up 
    if (st + $(window).height() < $(document).height()) { 
     $('nav').removeClass('nav-up').addClass('nav-down, nav-blk'); 
    } 
    } 

    lastScrollTop = st; 
} 

Затем добавьте класс в CSS (убедитесь, что он объявлен после nav-blk):

.nav-top{ 
    background-color: transparent; 
    opacity: 1; 
}