javascript - jquery 滚动插件错误

标签 javascript jquery html css

我正在创建小型 jQuery 滚动插件来学习目的， 它在滚动时获取每个元素的高度，当元素到达视口(viewport)时为元素设置动画。

没有错误显示，但代码不工作请检查。 如果我第一次尝试没有将逻辑放入它正在运行的函数中，但在集成内部函数后它不起作用，请检查 

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>

最佳答案

您必须在 (function( $ ){} 中编写您的函数，并将 .sidebar 的默认不透明度应用为 0 或其他值，因此当不透明度的值更改为1 你可以看到过渡

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();

    });
});
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>

关于javascript - jquery 滚动插件错误，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48945681/

上一篇：javascript - 响应 "Full Div"YouTube 视频

下一篇：javascript - 如何在文本html中获取一个单词并在其下划线？

相关文章：

javascript - Typeahead.js 干扰 Bootstrap 输入组

javascript - amCharts LabelFunction 不工作

javascript - 将 float 与字符串进行比较时，此代码是否有效？

Javascript Json Obj 动态数组变量名

html - 创建动态文本框在 IE 中不起作用

javascript - FormatCurrency 不是函数

JavaScript 代码不起作用

Jquery/Javascript 将一个父级拖放到另一个父级

javascript - 如何将jQuery添加的元素设置到其他元素的后面

html - Windows 中 <select> 列表的宽度比 mac 宽

©2024 IT工具网  联系我们