1

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

我希望上面的代码能对我真正想要实现的目标有所了解。提前致谢。

你可以看到问题：

你可以看到问题

4

1 回答 1

2

如果您想在滚动时一起移动，则必须将按钮的位置更改为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>

于 2015-08-18T21:11:06.133 回答