动态地在fullpage.js中修复元素（标题）
我正在fullpage.js中构建一个页面。 在第一张幻灯片上是一个消耗视口高度90％的图像。 另外10％是图像下方的导航栏。 下图显示了它。
当我滚动到下一张幻灯片时，我希望导航栏成为其余幻灯片的固定标题。
我尝试在元素offset().top修复元素offset().top使用jQuery对$(window).top() offset().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'); } });
这是可能的，我该如何实现？
如果你使用的是默认选项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{ -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属性出现问题：
Header ... ... ...
看演示
更新：
如果您使用的是scrollBar:true ，则使用以下CSS而不是前一个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; }
见演示
为什么不检查你是否滚过窗户的高度？
看看我的小提琴
$(window).scroll(function () { var nav = $('#nav'); var offset = $(this).height(); if (($(window).scrollTop()) >= offset) { nav.addClass('fixed'); } else { nav.removeClass('fixed'); } });