我正在使用Bootstrap 4作为我的框架,我想在我的背景图像上的页面右上方创建一个固定的幻灯片,以获取更多信息。但是问题是,每当我单击我在顶上固定的jQuery触发按钮时,内容都会显示在背景图像的底部,而不是在背景图像上滑动,而Z index则更高。这是我要实现的目标,您可以在此模板上看到它,顶部的红色滑块按钮:
http://demo.themetorium.net/html/asso/v.1.3/theme/index.html
这是我到目前为止的JSFIDDLE
$(document).ready(function(){
$("#slider-button p").click(function(){
$(".top-slider").slideToggle();
$(".hey").css('right', '0');
});
});
我认为您不需要插件,只需做相同的事情,您在评论中提供的小提琴(小提琴(。
另外,您可以放置一个具有透明背景的经典纳维托
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</div>
</div>
<nav class="navbar navbar-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
</div>
然后在CSS
中.navbar {
background-color: transparent;
}
这可能会解决问题?