Question

我的html文件中有一个简单的脚本，它会根据$(window).scrollTop()函数的结果更改div的不透明度。因此，如果我滚动某个点，则会出现div，如果我在该点后面向后滚动则会再次消失。

这很好用：

$(window).scroll(function () {
    if ($(window).scrollTop() > $("#m-product-sweater").offset().top) {
        $("#m-nav").animate({opacity: "1"}, 500);
    };
});

缺少将opactiy更改回0的逻辑。所以我只是将代码更改为：

$(window).scroll(function () {
    if ($(window).scrollTop() > $("#m-product-sweater").offset().top) {
        $("#m-nav").animate({opacity: "1"}, 500);
    };
    if ($(window).scrollTop() < $("#m-product-sweater").offset().top) {
        $("#m-nav").animate({opacity: "0"}, 500);
    };
});

突然之间，整个剧本将不再起作用！为什么？我没有看到任何错误。我也尝试过这样的else：

$(window).scroll(function () {
    if ($(window).scrollTop() > $("#m-product-sweater").offset().top) {
        $("#m-nav").animate({opacity: "1"}, 500);
    } else {
        $("#m-nav").animate({opacity: "0"}, 500);
    };
});

也不会工作。我被卡住了。：（

Answer 1

这是一件小事，但每次窗口滚动时，您的代码都会重新隐藏相同的元素。您可能需要考虑修改if语句以使其更具选择性：

var toggleMe = $("#m-nav");
$(window).scroll(function() {
  var myWindowTop = $(document).scrollTop();
  var myContentTop = $(".content-pane").offset().top;
  // I'm checking the scroll position AND
  //  the visibility of my toggled div.
  //  This way, the if statement only runs
  //  once rather than constantly stacking.
  if (myWindowTop > myContentTop && toggleMe.css("opacity") == "0") {
    console.log("showMe!");
    toggleMe.animate({
      opacity: "1"
    }, 500);
  } else

  // I'm checking the scroll position AND
  //  the visibility of my toggled div.
  //  This way, the if statement only runs
  //  once rather than constantly stacking.
  if (myWindowTop < myContentTop && toggleMe.css("opacity") == "1") {
    console.log("hideMe!");
    toggleMe.animate({
      opacity: "0"
    }, 500);

  }

});

.content-pane {
  border: 1px dotted red;
}
.content-pane p {} #m-nav {
  position: fixed;
  top: 20px;
  left: 5px;
  background-color: #ccc;
  border: 1px solid blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Curabitur non nulla sit amet nisl tempus
  convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>
<div class="content-pane">
  <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Curabitur non nulla sit amet nisl
    tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>

  <p>Donec rutrum congue leo eget malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Donec sollicitudin molestie
    malesuada. Nulla porttitor accumsan tincidunt.</p>

  <p>Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula elementum sed sit
    amet dui. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
  <p>Quisque velit nisi, pretium ut lacinia in, elementum id enim. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Proin eget tortor risus. Curabitur non nulla sit amet nisl
    tempus convallis quis ac lectus. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p>

  <p>Donec rutrum congue leo eget malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Vivamus suscipit tortor eget felis porttitor volutpat. Donec sollicitudin molestie
    malesuada. Nulla porttitor accumsan tincidunt.</p>

  <p>Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Pellentesque in ipsum id orci porta dapibus. Vestibulum ac diam sit amet quam vehicula elementum sed sit
    amet dui. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>
</div>
<div id="m-nav">
  <h2>
FOO BAR FOO BAR
</h2>
</div>

Answer 2

我还没有深入研究它，但乍一看我的直觉说它应该是一个if和else if。

$(window).scroll(function () {
    if ($(window).scrollTop() > $("#m-product-sweater").offset().top) {
        $("#m-nav").animate({opacity: "1"}, 500);
    };
    else if ($(window).scrollTop() < $("#m-product-sweater").offset().top) {
        $("#m-nav").animate({opacity: "0"}, 500);
    };
});

你可能还想在第二件事情中选择.offset().top以外的其他东西，因为它可能会尝试在同一地点同时进行这两项操作，因为它们都引用了div的顶部{1}}我相信。编辑：有些人正在评论，更改＆gt; ＆安培; ＆LT;也可以纠正它。

简单的javascript if语句不起作用

2 个答案: