我怎样才能让我的 header 不随整页 js 中的幻灯片一起移动

Question

我在 fullpagejs 中创建了一张幻灯片，但 header 会随着幻灯片一起移动，这不太好。如何让 header 继续出现在背景 image/slides 中而不随幻灯片一起移动？

如果我将 header 从背景部分中取出，它会在幻灯片移动时保留，但它会在顶部创建一个我不想要的白色 space。我试图用绝对位置和相对位置来修复它，但 none 似乎工作需要帮助。

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

header 喜欢 fullpage.js main page 的菜单怎么样？

我添加了这个：

<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;
}

你可以试试here。它看起来更简单，因为我错过了 css 的某些部分，但我想你会明白的。

#2

我不确定这是记录在案的行为，但我发现了另一个更简单的选项 - 只需添加：

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

就在 <section class="section"> 之后。试试看 here.

我怎样才能让我的 header 不随整页 js 中的幻灯片一起移动

How can i make my header not move along with my slides in fullpagejs

javascript

html

css

fullpage.js

#1

#2