Question

当窗口向下滚动到.header不再可见时，我一直在监视哪些CSS类属性应用于.view。类scroll-header已添加到.header，但未应用关联的CSS属性。他们质疑为什么以及如何解决这个问题？

$(document).ready(function() {
  console.log("script.js is detected"); //check

  $(window).scroll(function() {
    console.log("window onscroll being called."); //check
    if ($("div.view").visible(true)) {
      console.log("YES if ( $(\"div.view\").visible(true) )"); //check
      $(".header").removeClass(".scroll-header");
    } else {
      console.log("NO if ( $(\"div.view\").visible(true) )"); //check
      $(".header").addClass(".scroll-header");
    }
  });

});

.view {
  height: 500px;
  width: 100%;
  background-color: crimson;
}
.second {
  height: 2500px;
  width: 100%;
  background-color: purple;
}
.header {
  position: absolute;
  width: 100%;
  height: 100px;
  background-color: cyan;
  top: 0px;
  left: 0px;
}
.scroll-header {
  background-color: yellow;
  position: fixed;
  width: 100%;
  height: 70px;
  background-color: yellow;
}
* {
  border: 0px;
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.visible/1.1.0/jquery.visible.min.js"></script>
<div class="view">.</div>
<div class="header">.</div>
<div class="second">.</div>
<div class="scroll-header" style="bottom:0px;">.</div>

Answer 1

如评论中所述，.visible不是jquery的函数。虽然您可以使用以下代码来检测您的dom元素是否可见：

if ($("#yourElem").is(":visible") == true) { 
    //do something
}
else {
    //do something else
}

当你使用jquery.visible插件时。你的代码在javascript中是错误的。正确的代码：

$(document).ready(function() {
  console.log("script.js is detected"); //check

  $(window).scroll(function() {
    console.log("window onscroll being called."); //check
    if ($("div.view").visible(true)) {
      console.log("YES if ( $(\"div.view\").visible(true) )"); //check
      $(".header").removeClass("scroll-header");
    } else {
      console.log("NO if ( $(\"div.view\").visible(true) )"); //check
      $(".header").addClass("scroll-header");
    }
  });

});

您正在添加.scroll-header而不是scroll-header

JS在运行时将一个CSS类添加到元素中，但不应用其属性。为什么呢？

1 个答案: