Question

我正在创建用于学习目的的小型jQuery滚动插件，滚动时以及当项目进入视口时，它会获得每个元素的高度。

没有显示错误，但代码无效请检查。 ifrst我尝试没有把逻辑放在函数中它正在工作，但在集成内部函数后它无法工作，请检查

jQuery(document).ready(function(){
	var windheight = jQuery(window).height();
	var windTop = jQuery(window).scrollTop();
	var windbottom = windheight + windTop ;

	jQuery.fn.revealOnScroll = function(){
		return this.each(function(e) {
			//console.log(this);
			var obof = jQuery(this).offset();
			var oboftop = obof.top;
			if(!jQuery(this).hasClass('hide')){
				jQuery(this).addClass('hide');
			}
			if(!jQuery(this).hasClass('neww')){
				if(windbottom > oboftop){
					jQuery(this).animate({'opacity' : 1}, 3000).addClass('neww');
				}	
			}
		});
	}

	jQuery(window).scroll(function(){
		windheight = jQuery(window).height();
		windTop = jQuery(window).scrollTop();
		windbottom = windheight + windTop ;

		jQuery('.sidebar').revealOnScroll();
	
	});
});

html {
	padding: 0;
	margin: 0;
	background-color: #FFF;
}

body {
	font-family: Helvetica, sans-serif;
	line-height: 1.5em;
	padding: 15px;
	margin: 0;
	color: #000;
}

a,
a:link,
a:visited {
	color: blue;
}

.status {
	padding: 10px;
	position: fixed;
	top: 0;
	right: 0;
	background-color: #000;
	color: #FFF;
	z-index: 900;
}

.status-bottom {
	padding: 10px;
	position: fixed;
	bottom: 0;
	right: 0;
	background-color: #000;
	color: #FFF;
	z-index: 901;
}

img {
	max-width: 100%;
	height: auto;
	margin-bottom: 1em;
}

p {
	margin: 0 0 1em 0;
}

ul {
	margin: 0;
	padding: 0;
	float: left;
	width: 48%;
}

.columns {
	padding-bottom: 20px;
}

li {
	list-style: inside;
	background-color: #ebf6fe;
	padding: 7px;
	margin-bottom: 10px;
	border: 4px solid #d9e8f3;
}

aside {
	float: right;
	width: 48%;
	background-color: #ffe5b2;
	padding: 20px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 4px solid #efd39d;
}

.container {
	max-width: 700px;
	margin: 0 auto;
	overflow: hidden;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

<!DOCTYPE html>
<html lang="en">

<head>
	<title>jQuery Tutorial</title>                  
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
	
	<link rel="stylesheet" media="screen, projection" href="css/screen.css" />
	
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
	
	
</head>

<body>
	
	<!-- container -->
	<div class="container">
		
		<h1>jQuery Next Steps</h1>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<img src="images/bee.jpg">
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<!-- clearfix -->
		<div class="columns clearfix">
			
			<ul>
				<li>List item one</li>
				<li>List item two</li>
				<li>List item three</li>
				<li>List item four</li>
				<li>List item five</li>
				<li>List item six</li>
			</ul>
			
			<aside class="sidebar">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</aside>
			
		</div><!-- /clearfix -->
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<img class="example-photo" src="images/flower.jpg">
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<img src="images/orange.jpg" id="orange">
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
	</div><!-- /container -->
	
</body>

</html>

Answer 1

您必须在(function( $ ){}内编写您的函数，并将.sidebar的默认不透明度应用于0或其他值，以便当不透明度的值更改为1时，您可以看到转换

＆＃13;

jQuery(document).ready(function() {
    jQuery('.sidebar').css('opacity', '0');
    
    var windheight = jQuery(window).height();
    var windTop = jQuery(window).scrollTop();
    var windbottom = windheight + windTop;
    
    (function( $ ){
        $.fn.revealOnScroll = function() {

            return this.each(function(e) {

                var obof = jQuery(this).offset();
                var oboftop = obof.top;
                if (!jQuery(this).hasClass('hide')) {
                    jQuery(this).addClass('hide');
                }
                if (!jQuery(this).hasClass('neww')) {
                    if (windbottom > oboftop) {
                        jQuery(this).animate({ 'opacity': 1 }, 3000).addClass('neww');
                    }
                }
            });
        }
    })( jQuery );

    jQuery(window).scroll(function() {
        windheight = jQuery(window).height();
        windTop = jQuery(window).scrollTop();
        windbottom = windheight + windTop;
        jQuery('.sidebar').revealOnScroll();

    });
});

＆＃13;

html {
	padding: 0;
	margin: 0;
	background-color: #FFF;
}

body {
	font-family: Helvetica, sans-serif;
	line-height: 1.5em;
	padding: 15px;
	margin: 0;
	color: #000;
}

a,
a:link,
a:visited {
	color: blue;
}

.status {
	padding: 10px;
	position: fixed;
	top: 0;
	right: 0;
	background-color: #000;
	color: #FFF;
	z-index: 900;
}

.status-bottom {
	padding: 10px;
	position: fixed;
	bottom: 0;
	right: 0;
	background-color: #000;
	color: #FFF;
	z-index: 901;
}

img {
	max-width: 100%;
	height: auto;
	margin-bottom: 1em;
}

p {
	margin: 0 0 1em 0;
}

ul {
	margin: 0;
	padding: 0;
	float: left;
	width: 48%;
}

.columns {
	padding-bottom: 20px;
}

li {
	list-style: inside;
	background-color: #ebf6fe;
	padding: 7px;
	margin-bottom: 10px;
	border: 4px solid #d9e8f3;
}

aside {
	float: right;
	width: 48%;
	background-color: #ffe5b2;
	padding: 20px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	border: 4px solid #efd39d;
}

.container {
	max-width: 700px;
	margin: 0 auto;
	overflow: hidden;
}

.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

＆＃13;

<!DOCTYPE html>
<html lang="en">

<head>
	<title>jQuery Tutorial</title>                  
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
	
	<link rel="stylesheet" media="screen, projection" href="css/screen.css" />
	
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
	
	
</head>

<body>
	
	<!-- container -->
	<div class="container">
		
		<h1>jQuery Next Steps</h1>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<img src="images/bee.jpg">
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<!-- clearfix -->
		<div class="columns clearfix">
			
			<ul>
				<li>List item one</li>
				<li>List item two</li>
				<li>List item three</li>
				<li>List item four</li>
				<li>List item five</li>
				<li>List item six</li>
			</ul>
			
			<aside class="sidebar">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
			</aside>
			
		</div><!-- /clearfix -->
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<img class="example-photo" src="images/flower.jpg">
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<img src="images/orange.jpg" id="orange">
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		
	</div><!-- /container -->
	
</body>

</html>

＆＃13;

jquery滚动插件错误

1 个答案: