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あなたはようこそ！ –