jQuery scroll() 方法在页面堆积.js上不起作用

Question

只有在'#pagepiling .section:first-child'处于活动状态时，我才需要为#menu添加类。滚动时，必须删除该类。我需要检查每个卷轴的状况。

$(window).scroll(function () {
alert("woow");
if($('#pagepiling .section:first-child').hasClass('active')) {
$("#menu").addClass("sticky");
}
});

请从这里查看代码 https://codepen.io/anon/pen/PagXLw

Answer 1

您可以使用"onLeave"回调操作(阅读文档(并检查幻灯片是否是第一张幻灯片。 像这样的东西 https://codepen.io/anon/pen/wXZVjB

$(document).ready(function() {
			/*
			* Plugin intialization
			*/
	    	$('#pagepiling').pagepiling({
	    		menu: '#menu',
	    		anchors: ['page1', 'page2', 'page3', 'page4'],
			    sectionsColor: ['white', '#ee005a', '#2C3E50', '#39C'],
			    navigation: {
			    	'position': 'right',
			   		'tooltips': ['Page 1', 'Page 2', 'Page 3', 'Page 4']
			   	},
			    afterRender: function(){
			    	$('#pp-nav').addClass('custom');

			    },
onLeave: function(index, nextIndex, direction){
if(nextIndex==1) {                                             

		$("#menu").addClass("sticky");
} else{
$("#menu").removeClass("sticky");
}
	                                                  
},
			    afterLoad: function(anchorLink, index){
			    	if(index>1){
			    		$('#pp-nav').removeClass('custom');
			    	}else{
			    		$('#pp-nav').addClass('custom');
			    	}
			    }
			});
			/*
		    * Internal use of the demo website
		    */
		    $('#showExamples').click(function(e){
				e.stopPropagation();
				e.preventDefault();
				$('#examplesList').toggle();
			});
			$('html').click(function(){
				$('#examplesList').hide();
			});
	// if($('#pagepiling .section:first-child').hasClass('active')) {
	// 	$("#menu").addClass("sticky");
	// }
	    });
$(window).scroll(function () {
	alert("woow");
	if($('#pagepiling .section:first-child').hasClass('active')) {
		$("#menu").addClass("sticky");
	}
});

/* Section 1
	 * --------------------------------------- */
	#section1 h1{
		color: #444;
	}
	#section1 p{
		color: #333;
		color: rgba(0,0,0,0.3);
	}
	#section1 img{
		margin: 20px 0;
		opacity: 0.7;
	}
	/* Section 2
	 * --------------------------------------- */
	#section2 h1,
	#section2 p{
		z-index: 3;
	}
	#section2 p{
		opacity: 0.8;
	}
	#section2 #colors{
		right: 60px;
		bottom: 0;
		position: absolute;
		height: 413px;
		width: 258px;
		background-image: url(imgs/colors.gif);
		background-repeat: no-repeat;
	}
	/* Section 3
	 * --------------------------------------- */
	#section3 #colors{
		left: 60px;
		bottom: 0;
	}
	#section3 p{
		color: #757575;
	}
	#colors2,
	#colors3{
		position: absolute;
		height: 163px;
		width: 362px;
		z-index: 1;
		background-repeat: no-repeat;
		left: 0;
		margin: 0 auto;
		right: 0;
	}
	#colors2{
		background-image: url(imgs/colors2.gif);
		top:0;
	}
	#colors3{
		background-image: url(imgs/colors3.gif);
		bottom:0;
	}
	/* Section 4
	 * --------------------------------------- */
	#section4 p{
		opacity: 0.6;
	}
	/* Overwriting fullPage.js tooltip color
	* --------------------------------------- */
	#pp-nav.custom .pp-tooltip{
		color: #AAA;
	}
	#markup{
		display: block;
		width: 450px;
		margin: 20px auto;
		text-align: left;
	}
.sticky {
background: red;
}

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato:300,400,700" />
<link rel="stylesheet" type="text/css" href="https://alvarotrigo.com/pagePiling/jquery.pagepiling.css" />
<link rel="stylesheet" type="text/css" href="https://alvarotrigo.com/pagePiling/demo.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script type="text/javascript" src="https://alvarotrigo.com/pagePiling/jquery.pagepiling.min.js"></script>
<ul id="menu" class="sticky">
		<li data-menuanchor="page1" class="active"><a href="#page1">เริ่มต้น</a></li>
		<li data-menuanchor="page2"><a href="#page2">เราทำอะไร</a></li>
		<li data-menuanchor="page3"><a href="#page3">ฟีเจอร์</a></li>
		<li data-menuanchor="page4"><a href="#page4">ติดต่อเรา</a></li>
	</ul>

	<div id="pagepiling">
	    <div class="section" id="section1">
	    	<h1>สวัสดีเนม</h1>
			<p>Create an original scrolling site by pagePiling.js</p>
			<img src="https://alvarotrigo.com/pagePiling/imgs/pagePiling-plugin.gif" alt="pagePiling" />
			<br />
	    </div>
	    <div class="section" id="section2">
	    	<div class="intro">
	    		<div id="colors"></div>
	    		<h1>jQuery plugin</h1>
	    		<p>Pile your sections one over another and access them scrolling or by URL!</p>
	    		<div id="markup">
	    			<script src="https://gist.github.com/alvarotrigo/4a87a4b8757d87df8a72.js"></script>
	    		</div>
	    	</div>
	    </div>
	    <div class="section" id="section3">
	    	<div class="intro">
	    		<h1>Configurable</h1>
	    		<p>Plenty of options, methods and callbacks to use.</p>
	    		<div id="colors2"></div>
	    		<div id="colors3"></div>
	    	</div>
	    </div>
	    <div class="section" id="section4">
	    	<div class="intro">
	    		<h1>Compatible</h1>
	    		<p>Designed to work on tablet and mobile devices.</p>
	    		<p>Oh! And its compatible with old browsers such as IE 8 or Opera 12!</p>
	    	</div>
	    </div>
	</div>

Answer 2

那行不通。Pagepiling.js不使用滚动条，因此不会触发滚动事件。

我鼓励您使用整页.js库与视差扩展一起使用

您可以通过将内容放在fp-bg元素中来模拟页面堆积.js效果，如这篇博客文章所示。

只要使用选项scrollBar:true或autoScrolling:false即可使用滚动事件。 此外，您还可以使用整页回调或 css 状态类来触发操作或 css 更改。

您还可以观看此视频，其中解释了条件动画。