I searched all possible solutions on the forum and nothing seemed to work. I want to perform a task once I scroll the amount of device height.
I have applied the JS directly from a solution on a similar question. I must be doing something else (something trivial, I bet) wrong.
I am attaching my entire code. I am relatively new to the forum so kindly forgive me for any mistakes. Thanks in advance ! :)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>The Restaurant Website!!</title>
<!-- Bootstrap version v3.3.7 -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<!-- Custom style sheet for the page -->
<link href="css/index_style.css" rel="stylesheet">
<!-- .js files placed in the end of <body> so that the page loads faster -->
<script src="js/jquery-3.2.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- Custom script for the page -->
<script src="js/index_js.js" type="text/javascript"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top scroll " style="opacity: 0.6;">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Restaurant Logo</a>
</div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</nav>
<div class="cover-image">
<div class="logo">
<span class="border">Restaurant Logo</span>
</div>
<div class="caption">
<span class="border"><a href="#">Book a table</a></span>
</div>
</div>
<div class="detail" style="min-height: 100%;">
<div class="row">
<div class="col-md-6 crop">
<img src="images/plate.jpg" style="max-width: 135%; margin-left: -10px; opacity: 0.65;">
</div>
<div class="col-md-6" style="padding: 0px 30px;">
<h1 class="text-center text-danger vibur">Restaurant quote !</h1>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing 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 class="menu-btn">
<span class="btn btn-danger"><a href="#" style="font-size: 20px; letter-spacing: 2px; color: inherit; text-decoration: none;">Menu <span class="glyphicon glyphicon-align-justify"></span></a></span>
</div>
</div>
</div>
</div>
<div class="cover2">
</div>
<div class="detail-alt">
<div class="container-fluid">
<span class="col-md-6"></span>
<div class="col-md-3">
<div class="info-card">
<h3 class="card-head">Opening Time</h3>
<hr class="hr-line">
<br>
<ul class="card-list">
<li>LUNCH SERVICE</li>
<li>Friday - Sunday: 11am - 1.30pm</li>
<li> </li>
<li>DINNER SERVICE</li>
<li>Daily: Bookings Available 6am - 9.30pm</li>
</ul>
</div>
</div>
<div class="col-md-3">
<div class="info-card">
<h3 class="card-head">Contact Us</h3>
<hr class="hr-line">
<br>
<ul class="card-list">
<li><span class="glyphicon glyphicon-envelope"></span> hello@restaurant.com</li>
<li><span class="glyphicon glyphicon-map-marker"></span> 123 Blank Road, Somewhere, AB 12345</li>
<li><span class="glyphicon glyphicon-earphone"></span> (+1) 123-123-123</li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
CSS :
@font-face {
font-family: vibur;
src: url('../fonts/Vibur-Regular.ttf');
}
body, html {
width: 100%;
height: 100%;
margin: 0;
font: 400 15px/1.8 "Lato", sans-serif;
color: #777;
overflow-x: hidden;
}
.vibur {
font-family: vibur;
}
.scroll {
visibility: collapse;
}
.cover-image, .cover2 {
position: relative;
opacity: 0.7;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.cover-image {
background-image: url('../images/cover.jpeg');
min-height: 100%;
}
.cover2 {
background-image: url('../images/cover2.jpeg');
min-height: 50%;
}
.logo {
position: absolute;
left: 0;
top: 25%;
width: 100%;
text-align: center;
color: #000;
}
.logo span.border {
background-color: #111;
color: #fff;
padding: 15px;
font-size: 35px;
letter-spacing: 8px;
}
.caption {
position: absolute;
left: 0;
top: 75%;
width: 100%;
text-align: center;
color: #000;
}
.caption span.border {
background-color: #111;
color: #fff;
padding: 18px;
font-size: 25px;
letter-spacing: 5px;
}
.menu-btn {
position: relative;
left: 0;
width: 100%;
text-align: center;
padding: 18px;
font-size: 25px;
letter-spacing: 5px;
opacity: 0.8;
}
.detail {
color: #777;
background-color: rgb(250, 251, 245);
text-align: center justify;
padding: 100px 80px;
}
.detail-alt {
color: #FF5E5E;
background-color: #A94442;
text-align: center justify;
padding: 40px 35px;
min-height: 60%;
opacity: 0.9;
}
.crop {
overflow: hidden;
}
h1 {
font: 400 45px/1.8 "Arial Black", Gadget, sans-serif;
letter-spacing: 2px;
}
.border a, a:hover, a:focus {
color: inherit;
text-decoration: inherit;
}
.info-card {
color: rgb(250, 251, 245);
text-align: left;
width: 100%;
line-height: 30px;
}
.info-card ul {
list-style: none;
}
.info-card hr {
display: block;
margin-left: auto;
margin-right: 80%;
border-style: groove;
border-width: 2px;
}
.card-head {
font: 400 22px/1.8;
letter-spacing: 2px;
}
.card-list {
width: 150%;
left:0;
margin-left: -30px;
}
@media only screen and (max-device-width: 1024px) {
.cover, .cover2 {
background-attachment: scroll;
}
}
JS:
var iScrollPos = 0;
$(document).ready(function() {
$(window).scroll(function () {
var iCurScrollPos = $(this).scrollTop();
if (iCurScrollPos > iScrollPos) {
alert('down');
} else {
alert('up');
}
iScrollPos = iCurScrollPos;
});
alert("document is ready");
});
