Question

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

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

请从此处https://codepen.io/anon/pen/PagXLw

检查代码

Answer 1

您可以使用“ onLeave”回调操作（read the documentation）并检查幻灯片是否为第一张。像这样的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不使用滚动条，因此不会触发滚动事件。

我鼓励您将fullPage.js library与parallax extension一起使用

您可以通过将内容放在fp-bg元素中来模拟pagePiling.js效果，如this blog article所示。

只要使用选项scrollBar:true或autoScrolling:false，就可以使用滚动事件。另外，您还可以使用fullpage callbacks或css state classes来触发操作或CSS更改。

您还可以看到this video，其中说明了条件动画。

jQuery scroll（）方法不适用于pagepiling.js

2 个答案: