Fatal编程技术网
  • jquery/
  • jQuery滚动功能即使在使用论坛解决方案后也不起作用

jQuery滚动功能即使在使用论坛解决方案后也不起作用

jquery

jQuery滚动功能即使在使用论坛解决方案后也不起作用,jquery,Jquery,我在论坛上搜索了所有可能的解决方案，但似乎没有任何效果。 我想在滚动设备高度后执行一项任务 我已经直接从一个类似问题的解决方案中应用了JS。我一定是做错了什么事（我敢打赌是小事） 我附上我的全部代码。我是论坛的新手，请原谅我的错误。提前感谢！：） HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content=

我在论坛上搜索了所有可能的解决方案，但似乎没有任何效果。 我想在滚动设备高度后执行一项任务

我已经直接从一个类似问题的解决方案中应用了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>&emsp;hello@restaurant.com</li>
                    <li><span class="glyphicon glyphicon-map-marker"></span>&emsp;123 Blank Road, Somewhere, AB 12345</li>
                    <li><span class="glyphicon glyphicon-earphone"></span>&emsp;(+1) 123-123-123</li>
                </ul>
            </div>
        </div>

    </div>
</div>

</body>
</html>
JS:

您需要删除下面的CSS（
overflow-x:hidden；
）属性，它才能工作

原因：

在html上设置溢出属性将取消其滚动 才能

另外，请在下面签出关于SO的讨论

演示：

您需要删除下面的CSS（
overflow-x:hidden；
）属性，它才能工作

原因：

在html上设置溢出属性将取消其滚动 才能

另外，请在下面签出关于SO的讨论

演示：

@ShivamKaushik不客气@ShivamKaushik不客气！！ 
@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;
      }
  }

    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");
});

body, html {
    width: 100%;
    height: 100%;
    margin: 0;
    font: 400 15px/1.8 "Lato", sans-serif;
    color: #777;
    /*overflow-x: hidden;*/
}