使用jquery后隐藏在图像下的导航div

时间:2015-07-21 18:18:54

标签: jquery html css

我向下滚动300px后会出现侧栏导航。但是,当将它应用于我的工作时,导航不会出现。但是当在jsfiddle中工作时,它看起来是正确的。所以我不知道它是否隐藏在我的电脑上的图像下但我似乎无法弄清楚为什么它低于一切。

所以这里是有问题的代码。

       <div id="cbp-fbscroller" class="cbp-fbscroller">
            <nav style="display:none;">
                <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>

.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%);
}

 $(window).on('scroll', function() {

    if ($(window).scrollTop() >= 900) {
       $('.cbp-fbscroller nav').fadeIn('slow');
    } else {
       $('.cbp-fbscroller nav').fadeOut('slow');
    }

  });

现在这里有两个小提琴。一个基本上只是一个代码转储,我看到它是否是我的方面的错误,但导航正确显示在小提琴中,似乎隐藏在图像下实际处理所有正确的图像等。然后另一个小提琴是一个更加简化的版本,可以正常工作。

简单:http://jsfiddle.net/6oaxt61a/20/

代码转储:http://jsfiddle.net/nwp1yv0s/3/

这两种导航在应用它时都起作用,它似乎被困在某些东西之下。

1 个答案:

答案 0 :(得分:1)

只是想在此讨论中发布解决方案。

以下脚本在jQuery之前加载,因此您收到“$ is not defined”错误,导致无法加载导航。

<script src="js/scrollfadein.js"></script> 

解决方案是按以下顺序加载脚本:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    
<script src="js/scrollfadein.js"></script>