javascript - 在滚动点上使侧边栏淡入

Question

一直在研究使我的侧边导航栏在我网站的特定区域淡入淡出的方法。只是不知道该怎么做。我发现了一些解决问题的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 处。此外，一旦我了解了它的工作原理，我就可以使用代码让其他内容也淡入滚动点。

这是一个基本的 fiddle ，所以你们可以理解 http://jsfiddle.net/vLf18Lbk/

淡入的 HTML 区域:

<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 淡入“转到顶部”，否则淡出“转到顶部”你可以检查javascript的第41行

$(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>

以同样的方式，您可以选择每个标签的淡入淡出或外观。