将一个项目放在一个滚动div的固定位置 [英] Place an item at a fixed position in a scrolling div

问题描述

我有一个内容丰富的页面， window 是可滚动的，其中有可滚动的 div ，其中我的目标是在 div 底部放置一个图标，当某人滚动 div 时这个图标将会显示，而在内容消失或窗口滚动后将不可见。
但是我不知道我怎么能实现我的目标。使它固定它对整个 body 滚动可见。

如果 body 滚动
，我希望该元素固定在div底部，并且不会显示。下面我举一个例子：

div {height：100px; border：1px solid;溢出：汽车;位置：相对; } span {background：red;位置：固定; }

< div> < p>我有一些< / p> < p>我有些东西shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu< / p> < p>我有些东西shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu< / p> < span>这需要在滚动div的同时在botti = om和可见的位置固定< / span>< / div> < p>我有一些< / p> < p>我有些东西shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu< / p> < p>我有些东西shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu< / p> < p>我有一些< / p> < p>我有些东西shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu< / p> < p>我有一些shdbfs jsdfjhs d sdfhsjdgf dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu< / p>

正如你所看到的，如果我 position ，红色条带内容对整个身体是可见的固定。但是，我只是希望它被固定在div的底部，并且只有当 div 滚动时才可见。

解决一种标准支持的方式是将它编辑为HTML标记，并将一个包装元素添加到可滚动元素和fixed元素 - 它们现在将具有 position：absolute; 改为：

$ b

#wrapper {/ * ADDED * / position：relative; width：200px;}＃scrollable {height：100px; border：1px solid;溢出：自动; position：relative;}＃wrapperFooter {background：red;位置：绝对; / ** / bottom：0;}

< div ID = 包装 > < div id =scrollable> < p style =border：4px dashed＃000; height：200px;>< / p> < / DIV> < div id =wrapperFooter>绝对！ ：）< / div>< / div>

I have a page full of content and window is scrollable, in which there is scrollable div where my objective is to place an icon at the very bottom of the div, which will be visible when someone is scrolling the div and will not visible after content disappears or window scrolls. But I am not getting how could I achieve my objective. As making it fixed It get visible to whole body scroll.

I want that element to be fixed at the div's bottom and will not visible if the body scrolls Below I am giving an example:

div { height: 100px;
    border: 1px solid; 
    overflow:auto;
    position:relative;
    
    }
span {
  background : red;
  position : fixed;
  
}

<div>
    <p>I have something</p>
    <p>I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
    <p>I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
    <span>this need to fixed at the botti=om and visible while scrolling the div</span>
</div>

    <p>I have something</p>
    <p>I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
    <p>I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
    <p>I have something</p>
    <p>I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>
    <p>I have something shdbfs jsdfjhs d sdfhsjdgf  dsb usbsd shdshdhsdbs ds dvhsd sdshd vcsgdvshuc sd chjsdcsshdcbshudcuysdchusd cuyssdc shd cscyusdc gsdcsducsgcs uycsucs sdusdyu</p>

As you can see the red strip content is visible to the whole body if I position it to be fixed. However, i just want it to be fixed at the div's bottom and visible only when div scrolling.

解决方案

A standardly supported way is to edit a it the HTML markup and add a wrapper element to both the scrollable and the "fixed" element - which will now have position: absolute; instead:

#wrapper {  /* ADDED */
  position: relative;
  width: 200px;
}

#scrollable {
  height: 100px;
  border: 1px solid;
  overflow: auto;
  position: relative;
}

#wrapperFooter {
  background: red;
  position: absolute; /**/
  bottom:0;
}

<div id="wrapper">
  <div id="scrollable">
    <p style="border: 4px dashed #000; height: 200px;"></p>
  </div>
  <div id="wrapperFooter">ABSOLUTELY! :)</div>
</div>

这篇关于将一个项目放在一个滚动div的固定位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！