为什么看不懂财产' top'未定义的?

时间:2016-09-05 06:48:10

标签: javascript jquery html css

我的网页上有粘性导航栏固定顶部和粘性导航栏的结构,我的粘性导航栏结构是



$(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>
&#13;
&#13;
&#13;

click to see on codepen

我的问题是,如果我没有将我的.sticky元素放到另一个页面上,javascript通知程序会给我这个错误,我不会在每个页面放置.sticky元素我该怎么办?做什么?

enter image description here

click to see real demo

click to see getting error

1 个答案:

答案 0 :(得分: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元素。