Question

我使用bootstrap 4作为我的框架，我想在我的背景图片的页面右上角创建一个固定的滑动条，以获取更多信息。但问题是每当我点击固定在顶部的jquery触发按钮时，内容显示在背景图像的底部而不是在背景图像上滑动，z-index更高。这就是我想要实现的，你可以在这个模板上看到它，顶部的红色滑块按钮：

http://demo.themetorium.net/html/asso/v.1.3/theme/index.html

This is my jsFiddle so far

$(document).ready(function(){
    $("#slider-button p").click(function(){

        $(".top-slider").slideToggle();
        $(".hey").css('right', '0');
    });
});

Answer 1

I don't think you need a plugin, just do the same thing the fiddle you provided in comments does (the fiddle).

Alternatively you can put a classical navbar with transparent background with a similar way to collapsed navbar

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

Then in css

.navbar {
    background-color: transparent;
}

This might do the trick ?

jQuery切换滑块

1 个答案: