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

ShankarSangoli，谢谢！

如何使用jQuery定位fixed元素

2 个答案: