Абсолютного позиционирования детей по отношению к родителю и видового

Question

<div class="parent"> 
    <strong>I function as a hover trigger</strong> 
    <div class="child">I am a child</div> 
    </div> 

    ... // More number of <div> Skipping for reducing the number of lines 

    <div class="parent"> 
    <strong>I function as a hover trigger</strong> 
    <div class="child">I am a child</div> 
    </div> 

CSS

.parent{ 
    display:block; 
    width:150px; 
    position:relative; 
} 
.child{ 
    position: absolute; 
    display: none; 
    top:0; 
    right:148px; 
} 

Сценарий

$('.parent').mouseenter(function(e) { 
    $(this).find('.child').css({"display": "block"}); 
}); 
$('.parent').mouseleave(function(e) { 
    $(this).find('.child').css({"display": "none"}); 
}); 

Ребенок <div> будет появляться, если родитель <div> наведен. И положение ребенка в отношении родителя. Но как можно настроить положение так, что если ребенок переполняет окно просмотра, его нужно подтолкнуть вверх. Обычно дочерний элемент, соответствующий верхнему родителю <div>, не переполняется из окна просмотра, тогда как дочерние элементы нижнего родителя <div> получают переполнение.

Answer 1

Поскольку вы используете JQuery, вы можете просто вычислить необходимое смещение

$('.parent').mouseenter(function(e) { 
    var $child = $(this).find('.child'); 
    $child.css({"display": "block"}); 
    var offset = $child.offset(); 
    if (offset.top + $child.height() > $(window).height()) { 
     var top = $child.height() - $(this).height(); 
     $child.css({'top': '-' + top + 'px'}); 
    } 
}); 

Это выглядит, если дно ребенка перетекает в иллюминатор и сдвигает ребенок необходимое смещение выше.

Посмотреть полный JSFiddle

Answer 2

Привет вы можете установить и if оператор вычисления, если дочерний элемент перетекает в иллюминатор, как это:

//Calculate the height of the window 
var wh = $(window).height(); 

//Begin Hover function 
$('.parent').hover(function(e) { 

//Calculate height of child and position from the top of viewport 
    var ch = $(this).find('.child').outerHeight(), 
     ct = $(this).offset().top - $(window).scrollTop(), 
     diff = ch + ct; 

//If that value are more than window height then change position of children 
    if (diff > wh) { 
     $(this).find('.child').css({'top':'auto','bottom':'0'}) 
    } 
    $(this).find('.child').css({"display": "block"}); 

}, function(e) { 
    $(this).find('.child').css({"display": "none"}); 

//Remove position after leave parent 
    $(this).find('.child').attr('style',''); 
}); 

Проверить это демо http://jsfiddle.net/P7NPd/2/