fullpage.js 带有固定的侧边栏图片库答案

【问题标题】：fullpage.js with fixed sidebar image galleryfullpage.js 带有固定的侧边栏图片库
【发布时间】：2015-11-29 19:47:17
【问题描述】：

我正在寻找一种将 fullpage.js 用作幻灯片的方法，左侧有一个固定的侧边栏，其中包含一个“INFO”按钮，单击该按钮会在 div 中滑动，其中的信息是指节/图像，在视口中可见.

我将 fullpage.js 的基本设置与 div 容器“fullpage”一起使用，包括“section”div。每个部分都有一个 bg-image 和一个带有图像捕获的 div。

侧边栏固定在“整页”容器的左侧和外部，带有以下标记。

<!-- Fixed Navigation Left -->
<aside class="sidebar fixed" id="gallery-nav">  
  <a class="gallery-nav-button-class float-left scrollDown"><i class="fa fa-long-arrow-left"></i></a> 

  <div class="button-group toggle-menu">
    <a href="" class="gallery-nav-button-class"><i class="fa fa-long-arrow-down"></i> <span>INFO</span></a>
    <a class="gallery-nav-button-class gallery-open"><i class="fa fa-long-arrow-down"></i> <span>GALERIE</span></a>
    <a href="#" class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-left scrollDown"></i></a>

    <!-- Gallery image count 4 -->
    <span>1/15</span>

    <a href="#" class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-right scrollUp"></i></a>
    <h3><span>GELÄNDESPORT</span></h3>
  </div> 

  <a data-menuanchor="Menu" href="index.html#Menu" class="gallery-nav-button-class menu-btn-fixed"> <span>MENU</span> <i class="fa fa-long-arrow-right"></i></a>         
</aside>

谁能帮我用jquery代码解决这个问题？

您可以在下面的图片中找到基本布局。

【问题讨论】：

你想让你的页面看起来像上图吗？
是的，到目前为止，我已经完成了所有设置和工作。我知道 html 和 css，所以我使用基础 6 框架将所有内容放在一起。
我不知道gut hub怎么用，所以我把它放在我们的服务器上，你可以自己看看。

标签： javascript jquery html css fullpage.js

【解决方案1】：

试试这个

    <!DOCTYPE html>
    <html lang="en">
        <head>

            <style>

              .site-nav{
                  height: 100vh;
                  width: 135px;
                  background-color: pink;
                  position: fixed;
              }

              body, html, .sidebar, .body {
                height: 100%;
                min-height: 100%;
                margin: 0;
                padding: 0;
              }

              #container {
                  width: 100%;
                  height: 100%;
              }

              .sidebar{
                  background-color: green;
                  width: 10%;
                  float: left;
                  height: 100%;
                  position: fixed;
              }

              .body{
                background-color: white;
                float:left;
                width:90%;
                height:100%;
              }

              #section-one {
                height: 100vh;
                width: 100%;
                background-color: pink;
              }

              #section-two {
                height: 100vh;
                width: 100%;
                background-color: red;
              }

              #section-three {
                height: 100vh;
                width: 100%;
                background-color: yellow;
              }

            </style>

        </head>
        <body>

                <div class="sidebar">

                </div>

                    <div id="section-one">

                    </div>

                    <div id="section-two">

                    </div>

                    <div id="section-three">

                    </div>

        </body>
    </html>

【讨论】：

很抱歉，我可能解释得不好。 fullpage.js 工作正常。我只是不知道如何为 Info-btn 设置 jQuery，它会播放包含引用当前部分的信息的 div。

【解决方案2】：

这是我网站的截图。我会尽快把它放到服务器上。并添加链接。

Preview

【讨论】：

【解决方案3】：

这是网站的 HTML 代码。

<!-- Fixed Navigation Left -->

<aside class="sidebar fixed" id="gallery-nav">  
  <a class="gallery-nav-button-class float-left scrollDown"><i class="fa fa-long-arrow-left"></i></a> 

  <div class="button-group toggle-menu">
    <a class="gallery-nav-button-class"><i class="fa fa-long-arrow-down"></i> <span>INFO</span></a>
    <a class="gallery-nav-button-class gallery-open"><i class="fa fa-long-arrow-down"></i> <span>GALERIE</span></a>
    <a class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-left scrollDown"></i></a>

    <!-- gallery image count 4 PHP Issue -->
    <span>1/15</span>

    <a class="gallery-nav-button-class up-down-arrwos"><i class="fa fa-caret-right scrollUp"></i></a>
    <h3><span>GELÄNDESPORT</span></h3>
  </div> 

  <a data-menuanchor="Menu" href="index.html#Menu" class="gallery-nav-button-class menu-btn-fixed"> <span>MENU</span> <i class="fa fa-long-arrow-right"></i></a>         
</aside>  


<div id="fullpage">

<!-- section 1 -->
    <div class="section">
      <div class="row gallery-content-box ">
        <div class="small-12 medium-6 columns panel">
          <h1>GEL&Auml;NDESPORT</h1>
          <h2>1955&mdash;60</h2>
          <p class="lead">die erste liebe<br>und Schule aller Renner</p>
          <hr>
          <a class="button scrollDown">WEITER</a>
        </div>
        <div class="small-12 medium-6 columns" id="glsp-1">
        </div>
      </div>
    </div>

 <!-- section 2 -->
    <div class="section">
      <div class="row gallery-content-box ">
        <div class="small-12 medium-6 columns panel">
          <h1>GEL&Auml;NDESPORT</h1>
          <h2>Bruno Beuss</h2>
          <hr>
          <a class="button scrollDown">WEITER</a>
        </div>
        <div class="small-12 medium-6 columns wow fadeIn" id="glsp-2">
        </div>
      </div>
    </div>

  <!-- section 3 -->
      <div class="section">
      <div class="row gallery-content-box ">
        <div class="small-12 medium-6 columns panel">
          <h1>GEL&Auml;NDESPORT</h1>
          <p class="lead">DIE ABSOLUTE BEHERRSCHUNG DER...</p>
          <hr>
          <a class="button scrollDown">GALERIE</a>
        </div>
        <div class="small-12 medium-6 columns wow fadeIn" id="glsp-3">
        </div>
      </div>
    </div>

  <!-- section 4 Gallery Start-->
    <div class="section">         
      <div class="row gallery-content-box  wow slideInLeft fadeIn">
        <div class="wow fadeIn" id="glsp-4">
        </div>
      </div>
    </div>    

 <!-- section 5 -->
    <div class="section">
      <div class="row gallery-content-box ">
        <div class="small-12 medium-6 columns panel wow fadeIn" data-wow-duration="1s" data-wow-delay="0.2s" id="glsp-5-1">
        </div>
        <div class="medium-6 columns wow fadeIn" data-wow-duration="1s" data-wow-delay="0.4s" id="glsp-5-2">
        </div>
      </div>
    </div>                

</div>

 <!-- Gallerie Lightbox -->    
<div class="medium-3 columns toggle-lighbox hide animated slideOutLeft" id="gallery-lightbox">
  <div class="row gallery-lightbox-innerwrap">
    <ul class="medium-11" id="gallery-lightbox-menu">
      <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
      <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
      <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
      <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
           <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
      <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
      <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
      <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
           <li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
      <li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
      <li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
      <li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
    </ul>
  </div>
</div>    



<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/fullpage.js/vendors/jquery.slimscroll.min.js"></script>     
<script src="bower_components/fullpage.js/jquery.fullPage.js"></script>
<script src="bower_components/what-input/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/foundation.js"></script>
<script src="bower_components/wow/dist/wow.js"></script>
<script src="js/app.js"></script>
<script>


    $(document).ready(function() {
      $('#fullpage').fullpage({
              anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'fifthPage'],              
              menu: '#gallery-lightbox-menu',
              resize: false,
              animateAnchor:false,
              scrollOverflow: true,
              autoScrolling:true,
              responsive: 900,
              fitSection: false,
              navigation:true,
              navigationPosition: 'right',
              navigationTooltips: ['firstSection', 'secondSection'],
              showActiveTooltip: false,      
              slidesNavigation: true,
              slidesNavPosition: 'bottom',                              
              continuousVertical:true,
              scrollBar: true,
              css3: true,

              afterLoad: function (anchorLink, index) {
                  // #toggle-menu for section 4...
                  if (index == 4) {
                     $(".toggle-menu").css('visibility','visible')
                  }
              },
              onLeave: function (index, nextIndex, direction) {
            //going from section 3 to 4
            if (index == 3 && direction == 'down') {
               //whatever
            }

            //going form section 4 to 3
            else if (index == 4 && direction == 'up') {
               $(".toggle-menu").css('visibility','hidden')
            }
        }
    });

// 切换灯箱开启器

    $('.gallery-open').click(function() {
    if($('.toggle-lighbox').hasClass('slideOutLeft'))
    {
        $('.toggle-lighbox').addClass('slideInLeft').removeClass('hide slideOutLeft');
    }
    else
    {
       $('.toggle-lighbox').addClass('slideOutLeft').removeClass('slideInLeft');
    }
  });

// slimscroll.js

    $(function(){
        $('.gallery-lightbox-innerwrap').slimScroll({
        height: '100vh',
        size: '7px',
        position: 'right',
        color: '#87704c',
        alwaysVisible: true,
        // distance: '-10px',
        // start: $('#child_image_element'),
        railVisible: true,
        railColor: '#87704c',
        railOpacity: 0.3,
        wheelStep: 10,
        allowPageScroll: true,
        disableFadeOut: true,
        });
    });



    $(document).on('click', '.scrollDown', function(){
      $.fn.fullpage.moveSectionDown();
    });    
    $(document).on('click', '.scrollUp', function(){
      $.fn.fullpage.moveSectionUp();
    }); 
                wow = new WOW(
                {
                boxClass:     'wow',      // default
                animateClass: 'animated', // default
                offset:       100,          // default
                mobile:       true,       // default
                live:         true        // default
              }
              )
              wow.init();         
  }); 
</script>

【讨论】：