Question

我有下拉表格。它出现在按钮悬停上。当它下降到窗口的不可见部分时，我试图让它掉到顶部，但我的功能不起作用

HTML：

<div class="main-btn">
  <p><a href="#">Free call</a>
  <br/>
  <i class="glyphicon glyphicon-chevron-down"></i>
  <form class="popover-form">
    <label for="">Name</label>
    <input type="text">
    <label for="">Phonenum</label>
    <input type="text" value="+375">
    <button>Call me!</button>
 </form>
</div>

CSS：

.main-btn .popover-form {
  display: none;
}

.main-btn {
  position: relative;
  z-index: 20;
}

.main-btn:hover .popover-form {
  display: block;
  position: absolute;
  top: 87px;
  left: 0;
  background: #edeae4;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  width: 285px;
}

JS：

function changePosition() {
    var currentForm = $(this).find('.popover-form');

    if ((this.offset().top + currentForm.height()) > $(window).height()) {
      currentForm.css('bottom', '87px');
      currentForm.css('right', '0');
    }
}

$('.main-btn').on('onmouseover', changePosition);

Answer 1

使用下面的代码。在css函数中将bottom , 87px更改为top , $(this).offset().top

  function changePosition() {
     var currentForm = $(this).find('.popover-form');

     var position = ( $(this).offset().top - currentForm.height() );
     if ( position <= 0 )   {
        currentForm.css('top', ($(this).offset().top + 10) );
        currentForm.css('right', '0');
     }else{
        currentForm.css('bottom', ($(this).offset().top - (position + 10)));
        currentForm.css('right', '0');
     }
  }

  $('.main-btn').on('mouseover', changePosition);

CSS。从顶部删除顶部：87px

 .main-btn:hover .popover-form {
   display: block;
   position: absolute;
   left: 0;
   background: #edeae4;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
   width: 285px;
}

DEMO

要检查底部的菜单，只需从html中删除所有<br>标记。

Answer 2

我不太确定这是否是你想要达到的目标，但这里是JS：

function changePosition() {

    var currentForm = $(this).find('.popover-form');
    if ( ($(this).offset().top + currentForm.height() ) > $(window).height() ) {
      currentForm.css('top', '-87px');
    }
  }

  $('.main-btn').on('mouseover', changePosition);

和小提琴：https://jsfiddle.net/sapLty32/

编辑：我相信 Nishit的方式可能更符合您的需求。负面定位有点脏。

function changePosition() {

    var currentForm = $(this).find('.popover-form');

    if ( ( $(this).offset().top + currentForm.height() ) > $(window).height() ) {
      currentForm.css('bottom', $(this).offset().top );
      currentForm.css('right', '0');
    }

}

  $('.main-btn').on('mouseover', changePosition);

小提琴：http://jsfiddle.net/nishit_maheta/4uj69gbt/

如何更改下拉块的位置？

2 个答案: