jquery scroll plugin error

Question

I'm creating small jQuery scroll plugin for learning the purpose, it's getting the height of each element when scrolling and when the item comes to viewport animate the element.

no error is showing in but code not working please check. ifrst i tried without putting the logic inside functiones it was working but after integrating inside function its not working please check

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>

Nidhi · Accepted Answer · 2018-02-24 04:36:55Z

You have to write your function inside (function( $ ){} and also apply default opacity of .sidebar to 0 or other value so when opacity's value change to 1 you can see transition

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>

yes, its possible just add jQuery('.sidebar').css('opacity', '0'); in jQuery(document).ready(). Check my updated code for that
hi tanks nidhi, is it possible to use this keyword and use instead of the className and use that code insdie the fucntion, to animate multiple sections
you can't add this code inside your function because your function call when you scroll down the page and you have to apply opacity:0 when page load but if you want to animate multiple sections you can add one same class(like animateThis) to all the section you want to animate and then apply this code for that common class (like jQuery('.animateThis').css('opacity', '0');) so where ever you add this common class ( animateThis) it automatically apply opacity:0;

Collectives™ on Stack Overflow

jquery scroll plugin error

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related