Сделать боковую панель fadein в точке прокрутки

Question

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

Данный пример является

if ($(window).scrollTop() >= "number of pixels") { 
    if ($('"button plus number"').css('display') === 'none') { 
     $('"button plus number"').fadeIn('slow'); 
     $('"button plus number"').prev().fadeOut(); 
     $('"button plus number"').next().fadeOut(); 
    } 
} 

Так в основном с моим кодом я желающей, чтобы получить .cbp-fbscroller исчезать или, по крайней мере появляются примерно 900px. Также, как только я получу понимание того, как это работает, я мог бы использовать этот код, чтобы другие вещи затухали и в точках прокрутки.

Вот основная скрипка, чтобы вы, ребята, можете получить представление http://jsfiddle.net/vLf18Lbk/

HTML область для FadeIn:

<div class="main"> 
    <div id="cbp-fbscroller" class="cbp-fbscroller"> 
     <nav> 
      <a href="#fbsection1" class="cbp-fbcurrent">Section 1</a> 
      <a href="#fbsection2">Section 2</a> 
      <a href="#fbsection3">Section 3</a> 
      <a href="#fbsection4">Section 4</a> 
      <a href="#fbsection5">Section 5</a> 
     </nav> 
     <section id="fbsection1"></section> 
     <section id="fbsection2"></section> 
     <section id="fbsection3"></section> 
     <section id="fbsection4"></section> 
     <section id="fbsection5"></section> 
    </div> 
</div>  

CSS необходимости исчезать:

/* The nav is fixed on the right side and we center it by translating it 50% 
(we don't know it's height so we can't use the negative margin trick) */ 
.cbp-fbscroller > nav { 
    position: fixed; 
    z-index: 9999; 
    right: 100px; 
    top: 50%; 
    width: 26px; 
    -webkit-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

Answer 1

код JQuery является верный. при прокрутке вниз более 250px замирание в «наверх», в других мудрых затухать «наверх» вы можете линии 41 из JavaScript

$(document).ready(function() { 
 
    $(document).on("scroll", onScroll); 
 
    
 
    //smoothscroll 
 
    $('a[href^="#"]').on('click', function (e) { 
 
     e.preventDefault(); 
 
     $(document).off("scroll"); 
 
     
 
     $('a').each(function() { 
 
      $(this).removeClass('active'); 
 
     }) 
 
     $(this).addClass('active'); 
 
     
 
     var target = this.hash, 
 
      menu = target; 
 
     $target = $(target); 
 
     $('html, body').stop().animate({ 
 
      'scrollTop': $target.offset().top+2 
 
     }, 500, 'swing', function() { 
 
      window.location.hash = target; 
 
      $(document).on("scroll", onScroll); 
 
     }); 
 
    }); 
 
}); 
 

 
function onScroll(event){ 
 
    var scrollPos = $(document).scrollTop(); 
 
    $('#menu-center a').each(function() { 
 
     var currLink = $(this); 
 
     var refElement = $(currLink.attr("href")); 
 
     if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { 
 
      $('#menu-center ul li a').removeClass("active"); 
 
      currLink.addClass("active"); 
 
     } 
 
     else{ 
 
      currLink.removeClass("active"); 
 
     } 
 
    }); 
 
} 
 

 
///// edit go to top 
 
$(window).scroll(function() { 
 
    if ($(this).scrollTop() > (250)) { 
 
     $("#top").fadeIn('fast'); 
 
    } else{ 
 
     $("#top").fadeOut('fast'); 
 
    }; 
 
}); 
 

 

 
$("a[href='gototop']").click(function() { 
 
    $("html, body").animate({ scrollTop: 0 }, "slow"); 
 
    return false; 
 
});

body, html { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
.menu { 
 
    width: 100%; 
 
    height: 75px; 
 
    background-color: rgba(0, 0, 0, 1); 
 
    position: fixed; 
 
    background-color:rgba(4, 180, 49, 0.6); 
 
    -webkit-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 
} 
 
.light-menu { 
 
    width: 100%; 
 
    height: 75px; 
 
    background-color: rgba(255, 255, 255, 1); 
 
    position: fixed; 
 
    background-color:rgba(4, 180, 49, 0.6); 
 
    -webkit-transition: all 0.3s ease; 
 
    -moz-transition: all 0.3s ease; 
 
    -o-transition: all 0.3s ease; 
 
    transition: all 0.3s ease; 
 
} 
 
#menu-center { 
 
    width: 980px; 
 
    height: 75px; 
 
    margin: 0 auto; 
 
} 
 
#menu-center ul { 
 
    margin: 15px 0 0 0; 
 
} 
 
#menu-center ul li { 
 
    list-style: none; 
 
    margin: 0 30px 0 0; 
 
    display: inline; 
 
} 
 
.active { 
 
    font-family:'Droid Sans', serif; 
 
    font-size: 14px; 
 
    color: #fff; 
 
    text-decoration: none; 
 
    line-height: 50px; 
 
} 
 
a { 
 
    font-family:'Droid Sans', serif; 
 
    font-size: 14px; 
 
    color: black; 
 
    text-decoration: none; 
 
    line-height: 50px; 
 
} 
 
#home { 
 
    background-color: grey; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    background-image: url(images/home-bg2.png); 
 
} 
 
#portfolio { 
 
    background-image: url(images/portfolio-bg.png); 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#about { 
 
    background-color: blue; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#contact { 
 
    background-color: red; 
 
    height: 100%; 
 
    width: 100%; 
 
} 
 
#top{ 
 
    position: fixed; 
 
    bottom: 5px; 
 
    right: 5px; 
 
    background-color: #ffff00; 
 
    cursor: pointer; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<div class="m1 menu"> 
 
    <div id="menu-center"> 
 
     <ul> 
 
      <li><a class="active" href="#home">Home</a> 
 

 
      </li> 
 
      <li><a href="#portfolio">Portfolio</a> 
 

 
      </li> 
 
      <li><a href="#about">About</a> 
 

 
      </li> 
 
      <li><a href="#contact">Contact</a> 
 

 
      </li> 
 
     </ul> 
 
    </div> 
 
</div> 
 
<div id="home"></div> 
 
<div id="portfolio"></div> 
 
<div id="about"></div> 
 
<div id="contact"></div> 
 
<a href="gototop" id="top">go to top</a>

проверить В Таким же образом вы можете выбрать выпадение или появление каждого тега.