我有下拉式表格。它出现在按钮悬停上。我尝试将其放到窗口的不可见部分时放到顶部,但是我的功能不起作用

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);

最佳答案

使用以下代码。在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。从CSS移除top: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>标签。

10-07 19:51
查看更多