javascript - 为什么无法读取未定义的属性 'top'？

Question

我有一个带有粘性导航栏固定顶部和粘性导航栏结构的网页，我的粘性导航栏结构是

$(function() {
  $(window).scroll(function() {
    if ($(window).scrollTop() > $(".b").offset().top + $(".b").height() && $("input").val() == "") {
      $(".sticky").show();
    } else {
      $(".sticky").hide();
    }
  });
});

.container {
  width: 1020px;
  margin: 0 auto;
}
.container>div {
  width: 100%;
  height: 300px;
  background: #f0f0f0;
  border: 1px solid #ccc;
  margin: 100px 0;
}
.a:after {
  content: "A";
  font-size: 250px;
  text-align: center;
  line-height: 300px;
  display: block;
  color: #999;
}
.b:after {
  content: "B";
  font-size: 250px;
  text-align: center;
  line-height: 300px;
  display: block;
  color: #999;
}
.c:after {
  content: "C";
  font-size: 250px;
  text-align: center;
  line-height: 300px;
  display: block;
  color: #999;
}
ul.sticky {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #f0f0f0;
  height: 50px;
  border-bottom: 5px solid #ccc;
  display: none;
}
ul.sticky:after,
ul.sticky:before {
  content: "";
  display: table;
  clear: both;
}
ul.sticky li a {
  display: block;
  float: left;
  line-height: 50px;
  padding: 0 30px;
  text-decoration: none;
  color: #999;
}
ul.sticky li a:hover {
  background: #999;
  color: #f0f0f0;
}

<ul class="sticky">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">About Us</a>
  </li>
  <li><a href="#">Download</a>
  </li>
  <li><a href="#">Forums</a>
  </li>
  <li><a href="#">Contact</a>
  </li>
</ul>

<div class="container">
  <input type="text" class="input">
  <div class="a"></div>
  <div class="b"></div>
  <div class="c"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>

click to see on codepen

我的问题是，如果我不把我的 .sticky 元素放在另一个页面 javascript 通知程序给我这个错误，我不会把我的 .sticky 元素放在每个页面上页面我必须做什么？

click to see real demo

click to see getting error

Answer 1

您收到此错误是因为 jQuery 未在您的网站中找到元素 .hotel-search-box。

Javascript

$(function() {
  $(window).scroll(function() {
  if (!$(".hotel-search-box").length) {
     return false; //Check if the element exist
  }
  if($(window).scrollTop() > $(".hotel-search-box").offset().top+$(".hotel-search-box").height() && $(".oda-giris-cikis").val() == ""){
          $(".sticky-checkin").show();
      }else{
          $(".sticky-checkin").hide();
      }
  });
});

要解决您的问题，请在您要显示粘性菜单的页面中添加一个 .hotel-search-box 元素。