如何使 bootstrap 弹窗随固定按钮一起移动

Question

我想实现一种行为，即当我滚动页面时，我的弹出窗口应该与我的固定按钮一起移动。我有以下 JS，CSS 和 HTML:

$(function () {
    $("#btn-pop").popover('show');            
});

h1{
    color:Silver;
}
#btn-pop{
    z-index: 1;
    position: fixed;
    top: 47%;
    left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">

        <!--These are some contents-->
        <div class="row">            
                <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>                                               
        </div>
        <div class="row">
            <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>                                   
        </div>
        <div class="row">
            <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>                                   
        </div>
        <div class="row">
            <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>                                   
        </div>

        <div class="row">
            <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1>                                   
        </div>

        <!--This is main thing--> 
        <button id="btn-pop" rel="popover" type="button" class="btn btn-primary" data-original-title="Setting" data-content="Check this amazing feature">
                <span class="glyphicon glyphicon-cog"></span>
        </button>

    </div>

我希望上面的代码让我明白我真正想要实现的目标。提前致谢。

可以看到问题：

Answer 1

如果您想在滚动时同时移动，则必须将按钮的位置更改为 position: absolute

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

试试这个：

$(function () {
    $("#btn-pop").popover('show');
});

h1 {
    color:Silver;
}
#btn-pop {
    z-index: 1;
    position: absolute;  /*changed to absolute*/
    top: 47%;
    left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
    <!--These are some contents-->
    <div class="row">
         <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1> 
    </div>
    <div class="row">
         <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1> 
    </div>
    <div class="row">
         <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1> 
    </div>
    <div class="row">
         <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1> 
    </div>
    <div class="row">
         <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1> 
    </div>
    <!--This is main thing-->
    <button id="btn-pop" rel="popover" type="button" class="btn btn-primary" data-original-title="Setting" data-content="Check this amazing feature"> <span class="glyphicon glyphicon-cog"></span>

    </button>
</div>

如果您希望两者都留在同一个地方，请像这样将 position: fixed 添加到弹出窗口中：

$(function () {
    $("#btn-pop").popover('show');
});

h1 {
    color:Silver;
}
#btn-pop {
    z-index: 1;
    position: fixed;
    top: 47%;
    left: 0;
}
.popover {
    position: fixed !important;  /* I use !important because in this snippet bootstrap's styles overwrite mines but in general it is not nedded*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
    <!--These are some contents-->
    <div class="row">
         <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1> 
    </div>
    <div class="row">
         <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1> 
    </div>
    <div class="row">
         <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1> 
    </div>
    <div class="row">
         <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1> 
    </div>
    <div class="row">
         <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?</h1> 
    </div>
    <!--This is main thing-->
    <button id="btn-pop" rel="popover" type="button" class="btn btn-primary" data-original-title="Setting" data-content="Check this amazing feature"> <span class="glyphicon glyphicon-cog"></span>

    </button>
</div>

如何使 bootstrap 弹窗随固定按钮一起移动

How to make bootstrap popover move along with fixed button

javascript

css

twitter-bootstrap

bootstrap-popover