当我向下滚动时，有人可以帮助我如何显示div吗？

Question

<div class="col-md-12 fixed-product-bar">
  <div class="col-sm-6 col-md-8">
    <?php echo $this->getPriceHtml($_product); ?>
  </div>
  <div class="col-sm-6 col-md-4">
    <?php if($_product->isSaleable()): ?>
    <?php echo $this->getChildHtml('addtocart') ?>
    <?php endif; ?>
  </div>
  <script>
    $(window).fixed - product - bar(function() {
      $(this).fixed - product - bar({
        'opacity': '1'
      }, 900);
    }

    });
  </script>

Answer 1

使用jquery滚动事件

$(window).on('scroll', function() {
  if($(this).scrollTop() >= 400) {
    $('.fixed-product-bar')
    .show()
    .css({
      'opacity': 1,
      //property: value
    });
  }
  else {
    $('.fixed-product-bar')
    .hide()
    .css({
      'opacity': 0,
      //property: value
    });
  }
});

body{
height: 1000px;
}
.fixed-product-bar{
display: none;
opacity: 0,
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="fixed-product-bar">
	<h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
  <h1>Hello world</h1>
</div>