如何使自举popover与固定按钮一起移动

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

与位置的元素都移动起来：固定的;相对于 视口进行定位，这意味着即使页面滚动，它也始终保持在同一位置。使用顶部，右侧，底部和左侧属性来定位元素。

试试这个：

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