在 fullpage.js 中动态地固定一个元素 (header)

Question

我正在 fullpage.js 中构建一个页面。第一张幻灯片上的图像占视口高度的 90%。另外 10% 是图像下方的导航栏。下图对此进行了演示。

当我滚动到下一张幻灯片时，我希望导航栏成为幻灯片其余部分的固定 header。

我尝试使用 jQuery 固定元素，一旦它的 offset().top 值相对于 $(window).top() 为 0。这对我不起作用。

$(window).scroll(function () {
    var nav = $('#nav');

    var eTop = nav.offset().top;
    if ((eTop - $(window).scrollTop()) == 0) {
        nav.addClass('fixed');
    }
    else {
        nav.removeClass('fixed');
    }
});

这可能吗？我该如何实现？

Answer 1

为什么不检查您是否滚动超过 window 的高度？

Check out my fiddle here

$(window).scroll(function () {
var nav = $('#nav');

var offset = $(this).height();
if (($(window).scrollTop()) >= offset) {
    nav.addClass('fixed');
}
else {
    nav.removeClass('fixed');
}
});

Answer 2

如果您使用的是默认选项 css3:true，那么这样做就可以了：

$('#fullpage').fullpage({
    sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
    onLeave: function(index, nextIndex, direction){
        //leaving 1st section
        if(index == 1){
           $('.header').addClass('fixed');
        }
        //back to the 1st section
        if(nextIndex == 1){
            $('.header').removeClass('fixed');
        }
    }      
});

您将需要此 CSS 作为 header 元素：

.header{
    -webkit-transition: all 0.7s ease;  
    -moz-transition: all 0.7s ease;  
      -o-transition: all 0.7s ease; 
         transition: all 0.7s ease; 

    position:absolute;
    top:100%;
    margin-top: -100px;
    left:0;
    background:#000;
    width:100%;
    color: #fff;
    height: 100px;
    z-index:999;
}
.header.fixed{
    bottom:auto;
    top:0;
    margin-top: 0;
}

你当然可以，改变高度等等。

考虑到我已将固定元素放置在插件的包装器之外。这样我就可以避免插件使用的 translate3d 属性出现问题：

<div class="header">Header</div>

<div id="fullpage">
    <div class="section">...</div>
    <div class="section">...</div>
   ...
</div>

See a demo

更新：

如果您使用的是 scrollBar:true，请使用以下 CSS 而不是之前的：

.section {
    text-align:center;
}
.header{
    -webkit-transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220);  
    -moz-transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220);  
      -o-transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220); 
         transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220); 
    position:fixed;
    top:100%;
    margin-top: -100px;
    left:0;
    background:#000;
    width:100%;
    color: #fff;
    height: 100px;
    z-index:999;
}
.header.fixed{
    bottom:auto;
    top:0;
    margin-top: 0;
    position:fixed;
}

See demo

在 fullpage.js 中动态地固定一个元素 (header)

Dynamically making an element fixed (header) in fullpage.js

html

javascript

css

jquery

fullpage.js

更新：