Question

我想实现一种行为，当我滚动页面时，我的popover应该与我的固定按钮一起移动。我有以下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

位置：固定的元素;是相对于视口，这意味着它总是停留在同一个地方，即使它页面滚动。使用了top，right，bottom和left属性定位元素。

试试这个：

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

如何使引导弹出框与固定按钮

1 个答案: