如何使我的头不与我的幻灯片在满页in中移动。

Question

我在fullpagejs中创建了一个幻灯片，但是标题与幻灯片一起移动，这并不好。如何使标题在不移动幻灯片的情况下继续显示在背景图像/幻灯片中？

如果我把标题从背景部分取出来，它会在幻灯片移动时保持不变，但它会在顶部创建一个我不想要的空白。我试着用绝对和相对的位置来解决这个问题，但是似乎没有人需要帮助。

​

      $(document).ready(function(){

//  $('#fullpage').fullpage({
//     sectionSelector: '.vertical-scrolling',
//     slideSelector: '.horizontal-scrolling',
//     controlArrows: false
//     // more options here
// });


// variables
var $header_top = $('.header-top');
var $nav = $('nav');



// toggle menu 
$header_top.find('a').on('click', function() {
  $(this).parent().toggleClass('open-menu');
});



// fullpage customization
$('#fullpage').fullpage({
  sectionsColor: ['firstSection'],

  loopBottom: false,
  afterRender: function () {
    setInterval (function () {
        $.fn.fullpage.moveSlideRight ();
    }, 5000);
  },
  // sectionSelector: '.vertical-scrolling',
  // slideSelector: '.horizontal-scrolling',
  navigation: true,
  slidesNavigation: true,
  controlArrows: false,

  
    

  afterLoad: function(anchorLink, index) {
    $header_top.css('background', 'rgba(0, 47, 77, .3)');
    $nav.css('background', 'rgba(0, 47, 77, .25)');
    setInterval(function() {
        $.fn.fullpage.moveSlideRight();
    }, 5000);
    if (index == 1) {
        $('#fp-nav').hide();
      }
  },

  
}); 
});

#homepage {
  position: relative; }
  #homepage .slider {
    background-size: cover !important; }
    #homepage .slider .hero {
      padding: 0 25px;
      display: flex;
      flex-direction: column;
      height: calc(100vh - 10%); }
      #homepage .slider .hero .header {
        padding-top: 20px;
        flex: 1 1 70px;
        display: flex;
        align-items: center;
        justify-content: space-between; }
        #homepage .slider .hero .header .logo img {
          cursor: pointer;
          image-rendering: -webkit-optimize-contrast; }
        #homepage .slider .hero .header i {
          color: #fff;

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>

<div class="container">
            <div id="homepage" class="main">
                <div id="fullpage">
                <section class="section">
                    <section class="slider slide"  style="background: url('http://neonrobot.com/wp-content/uploads/2014/09/unsplash-1.jpg') center center;">
                        <div class="hero">
                            <div class="header">
                                <div class="logo"><img src="assets/img/logo.png"></div>
                                <i id="menu-open" class="fa fa-bars fa-lg"></i>
                            </div>
                            <div class="welcome">
                                <div>
                                    <div class="hero-headings">Hello.</div>
                                    <div class="hero-description"></div> 
                                </div>
                            </div>
                        </div>
                        <div class="clients">
                            <div class="padding25">
                                <div class="clients-intro">Our Clients. &nbsp; <i class="fa   fa-angle-right"></i><i class="fa   fa-angle-right"></i></div>
                                <div class="clients-logos">sds</div>
                            </div>
                        </div>
                    </section>
                    <section class="slider slide" style="background: url('http://neonrobot.com/wp-content/uploads/2014/09/unsplash-1.jpg') center center;">
                        <div class="hero">
                            <div class="header">
                                <div class="logo"><img src="assets/img/logo.png" alt="logo"></div>
                                <i id="menu-open" class="fa fa-bars fa-lg"></i>
                            </div>
                            <div class="welcome">
                                <div>
                                    <div class="hero-headings">Hello.</div>
                                    <div class="hero-description"></div> 
                                </div>
                            </div>
                        </div>
                        <div class="clients">
                            <div class="padding25">
                                <div class="clients-intro">Our Clients. &nbsp; <i class="fa   fa-angle-right"></i><i class="fa   fa-angle-right"></i></div>
                                <div class="clients-logos">sds</div>
                            </div>
                        </div>
                    </section>
                </section>

                </div>
            </div>
        </div>

​

Answer 1

#1

标题(如fullpage.js主页菜单)呢？

我补充说：

<ul id="menu">
    <li class="menu-active">
        <a href="#" rel="noopener">
            <span>Wordpress Theme</span>
        </a>
    </li>
    <li><a href="#examples" class="show-examples">Examples</a></li>
    <li>
        <a rel="noopener" href="#">Docs</a>
    </li>
    <li id="menu-contact"><a href="#">Contact</a></li>
    <li>
        <a href="#" target="_blank" rel="noopener" class="twitter-share">
        </a>
    </li>
    <li id="menu-line" style="width: 166.953px; left: 20px;"></li>
</ul>

和一些css：

#menu {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 70;
    letter-spacing: 1px;
    font-size: 1.1em;
}
#menu li {
    display: inline-block;
    margin: 10px 0;
}
#menu a {
    color: #fff;
    padding: 0 1.1em 1.1em;
}
.menu-active {
    font-weight: 700;
}

你可以试试，这里。它看起来更简单，因为我错过了css的某些部分，但我认为您会理解的。

#2

我不确定它是否有文档化的行为，但我找到了另一个更简单的选择--只需添加以下内容：

<div class="fp-slidesNav top" style="color:white">
  Header
</div>

就在<section class="section">之后。试试吧，这里。