如果向下滚动到div使div粘

时间:2018-02-04 16:44:16

标签: javascript fullpage.js

我有fullpage.js设置。将js添加到div时,将在向下滚动到div时激活。 div保持固定在顶部。但是向下滚动没有任何反应。

我不确定它是否因为fullpage.js没有滚动。但我无法让它发挥作用。

可以将其设置为某个部分吗?如果它进入“#secondPage”交换类?

JS:

<script type="text/javascript">
$(document).ready(function () {  
  var top = $('.sticky-scroll-box').offset().top;
  $(window).scroll(function (event) {

      if (this.scrollTop > 145) 

      $('.sticky-scroll-box').addClass('fixedlogo');
    else
      $('.sticky-scroll-box').removeClass('fixedlogo');
    $('.sticky-scroll-box').width($('.sticky-scroll-box').parent().width());
  });
});
</script>

HTML

<div id="myContainer">
    <div class="section section-one" id="section1">
        <div class="fp-bg"></div>
            <div class="slide1block">
                <div class="slogonblock sticky-scroll-box">
                                    <img id="logo" src="/images/logo/logosmallg.svg">

                </div>
                <div class="introblock">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
                    sed doeiusmod tempor incididunt ut labore et dolore magna 
                    aliqua. Ut enimad minim veniam, qudr</p>
                </div>
                <div class="linkblock">
                    <li data-menuanchor="secondPage"><span class="arrow" id="rotate"></span><a class="linkblockf"  href="#secondPage">CLIENT PLATFORM</a></li>
                    <li data-menuanchor="3rdPage"><span class="arrow" id="rotate"></span><a class="linkblockf" href="#3rdPage">COUNTRY PROGRAMS</a></li>
                    <li data-menuanchor="4thpage"><span class="arrow" id="rotate"></span><a class="linkblockf" href="#4thpage">REAL INVESTMENTS</a></li>
            </div>
            </div>
            <div class="titleblock"><h1 class="titleblockf">Golden Visa&nbsp; | &nbsp;Investments</h1></div>
    </div>

CSS

.fixedlogo {
  position:fixed;
  top:0;
  z-index:99999;
}

谢谢

1 个答案:

答案 0 :(得分:0)

阅读fullPage.js FAQs,您就会找到原因和解决方案:

  

简答:对fullPage.js或autoScrolling使用scrollBar:true选项:如果您不想使用自动滚动功能,请使用false。

     

说明: Parallax以及许多依赖于网站滚动的其他插件,会侦听javascript的scrollTop属性和scroll事件。 fullPage.js实际上并没有滚动网站,但它改变了网站的top或translate3d属性。仅当使用fullPage.js选项scrollBar:true或autoScrolling:false时,它才会以scrollTop属性可访问的方式实际滚动网站。

如果您真的不想使用滚动条,那么只需使用fullpage.js提供的回调,例如onLeaveafterLoad。 在the docs中了解有关它们的更多信息。

这将是你想要完成的事情的正确方法。