Question

我想做的是，当滚动顶部大于.box-tocart偏移顶部时显示.product-info-main，并且如果到达.page-footer应该隐藏，但我无法将这些条件混合在一起，每个条件单独工作，但不能与||或&&

一起工作

var target = $('.product-info-main').offset().top;

$(window).scroll(function() {
  var footer = $('.page-footer').offset().top;
  var element = $('.box-tocart').offset().top;
  
  if (($(window).scrollTop() >= target) || (element >= footer)) {
    $('.box-tocart').show();
  } else {
    $('.box-tocart').hide();
  }

});

body {
  height: 2000px;
}

#nothing {
  height: 100px;
  background: red;
}

.product-info-main {
  height: 1000px;
}

.box-tocart {
  height: 30px;
  background: green;
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.page-footer {
  background: blue;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="nothing"></div>
<div class="product-info-main">
  <div class="box-tocart"></div>
</div>
<div class="page-footer"></div>

目标：如果滚动顶部大于.box-tocart偏移顶部，则显示.product-info-main，否则隐藏。另外，如果到达.page-footer隐藏，则显示其他，但我希望同时满足这两个条件，但无法使其正常工作。

当前代码段的问题是，到达.box-tocart后，它不会隐藏.page-footer

简单说明：绿色div应该在红色div之后显示，否则隐藏并且应该在之后隐藏到达蓝色div，其他隐藏。

Answer 1

您需要将条件更改为：

  var scrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();
  if ((scrollTop >= target) && (scrollTop + windowHeight <= footer)) {
    // ...
  }

更新示例：

var target = $('.product-info-main').offset().top;

$(window).scroll(function() {
  var footer = $('.page-footer').offset().top;
  var element = $('.box-tocart').offset().top;
  
  var scrollTop = $(window).scrollTop();
  var windowHeight = $(window).height();
  if ((scrollTop >= target) && (scrollTop + windowHeight <= footer)) {
    $('.box-tocart').show();
  } else {
    $('.box-tocart').hide();
  }

});

body {
  height: 2000px;
}

#nothing {
  height: 100px;
  background: red;
}

.product-info-main {
  height: 1000px;
}

.box-tocart {
  height: 30px;
  background: green;
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

.page-footer {
  background: blue;
  height: 100px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="nothing"></div>
<div class="product-info-main">
  <div class="box-tocart"></div>
</div>
<div class="page-footer"></div>

Answer 2

您应该使用public static void main(String []args){ List<String> strList = new ArrayList<>(); strList.add("Java"); strList.add("Python"); strList.add("Php"); Stream<String> strStream = strList.stream(); Stream<String> jFilter = strStream.filter(str -> { System.out.println("Filtering" + str); return str.startsWith("J"); }); System.out.println("After Stream creation"); strList.add("JavaScript"); // element added after filter creation strList.add("JQuery"); // element added after filter creation System.out.println(Arrays.toString(jFilter.toArray())); }而不是After Stream creation FilteringJava FilteringPython FilteringPhp FilteringJavaScript FilteringJQuery [Java, JavaScript, JQuery]，因此您的OR条件应类似于$(window).scrollTop()，这是因为滚动位置都是相对于窗口视图而不是购物车框< / p>

希望它能对您有所帮助。

滚动偏移量和元素的两个条件

2 个答案: