我有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 | Investments</h1></div>
</div>
CSS
.fixedlogo {
position:fixed;
top:0;
z-index:99999;
}
谢谢
答案 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提供的回调,例如onLeave
和afterLoad
。
在the docs中了解有关它们的更多信息。
这将是你想要完成的事情的正确方法。