允许div滚动页面滚动,但仅限于父div

时间:2015-09-21 14:05:05

标签: javascript jquery

我有一个DIV,当用户向下滚动时,需要尽可能多地留在页面上。它从它顶部的父级div开始。然后,当用户滚动时,它需要保持在页面上的位置,直到它到达div的底部,在那里它必须停止在页面上滚动然后通过滚动顶部来接受它的命运页面。

困惑?我也是。这是我想要在滚动上发生的事情的绘制图: enter image description here

以下是目前正在发生的事情: enter image description here

这是我用来实现这个目标的方法:

  //Start div scrolling
  if ($(this).scrollTop() > 420 && $(this).scrollTop() < 1200) {
      $('.fixedElement').css({
          'position': 'fixed',
          'top': '0px'
      });

  }

  //Stop div scrolling
  if ($(this).scrollTop() < 420) {
      $('.fixedElement').css({
          'position': 'static',
          'top': '0px'
      });

  }

  //Div to stop scrolling as div will leave the parent div otherwise. Master does not want that.
  if ($(this).scrollTop() > 1200) {
      $('.fixedElement').css({
          'position': 'static',
          'top': '',
          'bottom': '0px'
      });

  }

然而,我需要通过试验猜测何时让div停止移动。还有更好的方法吗?

我知道之前已经问过这个问题并且我已经研究过了,但是很多结果只显示了如何让它移动,而不是如何让它停在div的底部。

1 个答案:

答案 0 :(得分:3)

如果我已正确理解您的问题,您希望session_start(); if (isset($_GET['add'])) { $_SESSION['cart_'.$_GET['add']] + 1; } $query = mysqli_query($connection,"SELECT id, name, description, price FROM products WHERE quantity > 0 ORDER BY id DESC "); $rows= mysqli_num_rows($query); if ($rows==0) { echo 'there is no product to display'; } else { while ($rows = mysqli_fetch_assoc($query)) { $id = $rows['id']; $name = $rows['name']; $description = $rows['description']; $price = $rows['price']; echo '<p>'.$id.'<br> '.$name.'<br>'.$description.'<br> '.number_format($price, 2).' <a href="cart.php? add='.$id.'">Add</a> </p>'; } }echo $_SESSION['cart_']; div保持在其位置,只要屏幕顶部不超过inner div的高度减去parent div的高度,然后检查THIS JSfiddle

因此,您只是检查以下条件:

inner