Как позиционировать фиксированный элемент с помощью jQuery

Question

У меня очень простая проблема.У меня есть плеер на моем сайте, который и его класс выглядит так:

.jp-type-playlist
{
    position: fixed;
    bottom: 0px;
}

Также у меня есть всплывающее меню, которое должно срабатывать при нажатии.

.jp-playlists
{
    position: fixed;
    display: none;
}

Оба блока расположены натот же уровень:

<!-- Playlists -->
<div class="jp-playlists">...</div>
<!-- Player -->
<div class="jp-type-playlist">...</div>

Я хочу расположить его рядом с игроком и не знаю, как это сделать.Я пытался использовать .offset (), но он возвращает только смещение от верхней части документа, что бесполезно, если страница прокручивается вниз.Я пытался использовать jQuery UI .position (), но он работал так же, как и в предыдущем решении.

Пожалуйста, помогите мне с моей проблемой.Ссылка на сайт: http://synthetic.fm/#&&Genre=&Artist=&Album=

Меню плейлиста выглядит как маленький желтый список.

Заранее спасибо!

Answer 1

Вы можете попробовать это.

var $playList = $('.jp-type-playlist');
$('.jp-playlists').css({
    left: ($playList.offset().left + $playList.width()),
    top: $playList.offset().top + $(document).scrollTop()
});

Answer 2

Наконец я решил свою проблему следующим образом:

$('.jp-playlists').css('bottom', $(window).height() + $(document).scrollTop() - $('.jp-playlists-show').offset().top + $('.jp-playlists-show').height() / 2);
$('.jp-playlists').css('left', $('.jp-playlists-show').offset().left - $('.jp-playlists').width() / 2 + $('.jp-playlists-show').width() / 2);

ШанкарСанголи, спасибо!