如何使自舉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>