Question

我正在尝试避免将盒子向上拖动，但是可以将其向下拖动，这是我想到的，但是我不知道如何保持原始位置，因此我有添加它的参考如果检查。仅在稍微滚动主体后才会显示。

window.addEventListener("scroll",function(){
  if($(document).scrollTop() > 100){
    $( ".box" ).slideDown({
      start: function () {
        $(this).css({
          display: "flex"
        })
      }
    });    
  }

  var top = 0;
  var divOverlay = document.getElementsByClassName('box')[0];
  var is_clicked = false;

  divOverlay.addEventListener('mousedown', function(e){   
    is_clicked = true;
    top = divOverlay.offsetTop - e.clientY
  }, true);

  document.addEventListener('mouseup', function(){
    is_clicked = false;
  }, true);

  document.addEventListener('mousemove', function(e){  
    event.preventDefault();

    // add a check here so it doesn't allow dragging the container up?
    if(is_clicked){
      divOverlay.style.top  = (e.clientY + top) + 'px';

      // if the box reaches 50px down, it should automatically hide it if the user
      //$('.box').slideUp();
    }
  }, true);

})

Answer 1

您可以尝试使用<nav class="navbar navbar-expand-lg navbar-dark bg-primary"> <div class="container"> <a class="navbar-brand dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> WebsiteName </a> <div class="dropdown-menu" aria-labelledby="navbarDropdown"> <a class="dropdown-item" href="/>WebsiteName</a> <div class="dropdown-divider"></div> <h6 class="dropdown-header">Popular Subdomains</h6> <a class="dropdown-item" href="/">Subdomain 2</a><a class="dropdown-item" href="/">Subdomain 3</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="/">All Subdomains</a> </div> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarColor01"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="/">Home Link</a> </li> <li class="nav-item"> <a class="nav-link" href="/two-link/">Two Link</a> </li> </ul> <form class="form-inline my-2 my-lg-0" action="/search"> <input class="form-control mr-sm-2" type="text" name="q" placeholder="Search"> </form> </div> </div> </nav>将框的最大顶部位置限制为视口高度减去框高度：

Math.max

使用mousemove时如何阻止div向上移动？

1 个答案: