1
我在論壇上搜索了所有可能的解決方案，但似乎沒有任何工作。 一旦我滾動設備高度的數量，我想要執行一項任務。jQuery滾動功能即使在使用論壇解決方案後也不起作用
我已經從類似問題的解決方案直接應用JS。我一定在做別的事情（有些微不足道，我敢打賭）是錯的。
我附上我的整個代碼。我對這個論壇比較陌生，所以請原諒我的任何錯誤。提前致謝 ！ :)
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> [email protected]</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");
});
它完美地工作。非常感謝:) –
@ShivamKaushik歡迎您！ –