在fullpage.js中动态地使元素固定（标题） [英] Dynamically making an element fixed (header) in fullpage.js

问题描述

我正在

更新：

如果您使用 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; 
} 
  

查看演示

I'm building a page in fullpage.js. On the first slide is an image that consumes 90% of the height of the viewport. The other 10% is a navigation bar at the below the image. The image below demonstrates it.

As I scroll to the next slide, I want the navigation bar to become a fixed header for the remainder of the slides.

I tried making the element fixed once it's offset().top value is 0 against $(window).top() using jQuery. This did not work for me.

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

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

Is this possible and how do I achieve it?

解决方案

If you are using the default option css3:true, then this will do the trick:

$('#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');
        }
    }      
});

And you will need this CSS for the header element:

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

You can of course, change the height and so on.

Take into account that I've placed the fixed element outside the plugin's wrapper. This way I will avoid problems with the translate3d property used by the plugin:

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

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

See a demo

Update:

If you are using scrollBar:true, then use the following CSS instead of the previous one:

.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中动态地使元素固定（标题）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！