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