Faizal Munna
Reputation: 513
jquery scroll plugin error
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>Upvotes: 1
Views: 54
Answers (1)
Nidhi
Reputation: 1443
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>Upvotes: 1
Related Questions
- Can't scroll down on my website
- jQuery scrollTo plugin not working
- Facing issue with scroll
- jquery scrollTo not working
- jQuery Scrollbar Plugin
- Jquery Scroll shows error message
- ScrollTo Plugin not working
- not working: jquery custom scrollbar please help?
- Can't get ScrollTo jquery plugin working?
- problem with Custom scrollbar plugin