相关疑难解决方法(0)

如果滚动到屏幕顶部,如何将div粘贴到屏幕顶部？

我想创建一个div,它位于一个内容块下面,但是一旦页面滚动到足以接触其顶部边界,就会固定到位并与页面一起滚动.我知道我至少看过一个这样的在线例子,但我不记得它对我的生活.

有什么想法吗？

javascript css jquery scroll positioning

eva*_*anr

2019 05-15

293
推荐指数

9
解决办法

35万
查看次数

如何用溢出滚动设置tbody高度

在设置高度宽度溢出滚动时我遇到问题.

<style> 
     tbody{
       height:50px;display:block;overflow:scroll
     }
   </style>

       <h3>Table B</h3>
    <table style="border: 1px solid red;width:300px;display:block">
        <thead>
            <tr>
                <td>Name</td>
                <td>phone</td>
            </tr>
        </thead>
        <tbody style='height:50px;display:block;overflow:scroll'>
            <tr>
                <td>AAAA</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>BBBBB</td>
                <td>323232</td>
            </tr>
            <tr>
                <td>CCCCC</td>
                <td>3435656</td>
            </tr>
        </tbody>
    </table>

Run Code Online (Sandbox Code Playgroud)

在这里访问我的小提琴

我希望表B像表A一样有溢出滚动.

任何帮助将不胜感激.

非常感谢,M.

html css

Mav*_*ick

lucky-day

91
推荐指数

6
解决办法

18万
查看次数

我的立场:使用flexbox时粘性元素不粘

我被困在这一点上,并认为我会分享这个position: sticky+弹性盒子的问题:

我的粘性div工作正常,直到我将视图切换到弹性盒容器,并且当它被包装在弹性盒父中时突然div不粘.

.flexbox-wrapper {
  display: flex;
  height: 600px;
}
.regular {
  background-color: blue;
}
.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background-color: red;
}

Run Code Online (Sandbox Code Playgroud)

<div class="flexbox-wrapper">
  <div class="regular">
    This is the regular box
  </div>
  <div class="sticky">
    This is the sticky box
  </div>
</div>

Run Code Online (Sandbox Code Playgroud)

JSFiddle显示问题

css sticky flexbox

BHO*_*OLT

2017 06-13

65
推荐指数

6
解决办法

3万
查看次数

为什么`overflow:hidden`阻止`position:sticky`工作？

在下面的代码段中,div容器内部有一个粘性位置.它始终保持在容器内部,并粘在滚动面板的顶部.这与UITableViewiOS上的标题的行为相同,其中标题保持可见,直到下一个标题位于顶部.

在第二个片段中,除了容器具有overflow:hiddenCSS规则之外,一切都是相同的.这似乎可以防止position:sticky行为正常工作.

.parent {
  position: relative;
  background: #ccc;
  width: 500px;
  height: 150px;
  overflow: auto;
  margin-bottom: 20px;
}

.hidden-overflow {
  overflow: hidden;
}

.sticky {
  position: sticky;
  background: #333;
  text-align: center;
  color: #fff;
  top: 10px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="parent">
  <div>
    <div class="sticky">
      Hi, I am a sticky inside the container which contains the first paragraph.
    </div>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus …

Run Code Online (Sandbox Code Playgroud)

css css-position

che*_*ica

2017 05-23

38
推荐指数

4
解决办法

2万
查看次数

css网格项上的粘性位置

我在这里看了其他的例子,但找不到一个让这个工作.我希望在页面滚动时侧边栏(部分)是粘性的.位置:粘贴有效,如果我把它放在导航,所以我的浏览器def支持它.

main {
  display: grid;
  grid-template-columns: 20% 55% 25%;
  grid-template-rows: 55px 1fr;
}

nav {
  background: blue;
  grid-row: 1;
  grid-column: 1 / 4;
}

section {
  background: grey;
  grid-column: 1 / 2;
  grid-row: 2;
  position: sticky;
  top: 0;
  left: 0;
}

article {
  background: yellow;
  grid-column: 2 / 4;
}

article p {
  padding-bottom: 1500px;
}

Run Code Online (Sandbox Code Playgroud)

<main>
  <nav></nav>
  <section>
    hi
  </section>
  <article>
    <p>hi</p>
  </article>
</main>

Run Code Online (Sandbox Code Playgroud)

html css css-position css3 css-grid

tot*_*oob

2018 06-12

13
推荐指数

3
解决办法

9162
查看次数

表与粘性标题和可调整大小的列,而不使用JQuery

我见过的所有解决方案都是使用粘性标题和可调整大小的列创建一个表似乎是在使用Jquery.我想要一个只使用CSS的普通旧解决方案.如果CSS不可能,那么我可以使用CSS + Javascript,但没有JQuery,请.

我找到了针对粘性标题的单独解决方案,以及针对可调整大小的列的单独解决方案,但两者都没有完整的解决方案有人可以帮忙吗？在我的尝试表tbody中唯一缺少的是display:block滚动条工作,但这会混淆其他一切.我的尝试:

        table{ 
        	display:block;
        	background-color:cyan;
        	height:300px !important; 
        }
        th, td {
        	min-width: 25px;
        	resize: horizontal;
        	overflow: auto;
        } 
             
        tbody { 
        	height: 30px !important;
        	background-color:green;
        	width: 100%;
        	font-size: 1.45vmin;
        	overflow-y: scroll; 
        }

Run Code Online (Sandbox Code Playgroud)

        	<div style="height:30px;background-color:red;">
            <table>
            <thead>
            <tr><td>header1</td><td>header2</td><td>header3</td><td>header4</td><td>header5</td></tr>
            </thead>
            <tbody>
        	<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
        	
        	</tbody>
            </table> …

Run Code Online (Sandbox Code Playgroud)

html javascript css

Max*_*nna

2019 01-11

13
推荐指数

3
解决办法

952
查看次数

嵌套div中的粘性位置CSS不起作用

我有粘性位置的问题。

这有效：

<html>

<body style="height: 2000px; ">
    <div style="height: 100px;"></div>
    <div style="position: sticky; top: 10px;">LOREM IPSUM</div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

这不起作用：

<html>

<body style="height: 2000px; ">
    <div style="height: 100px;"></div>
    <div>
            <div style="position: sticky; top: 10px;">LOREM IPSUM</div>
    </div>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

我的问题是：为什么内部 div 不粘？我用 Chrome 64 对其进行了测试。

html css layout nested

Rob*_*ski

2018 02-13

10
推荐指数

0
解决办法

7911
查看次数

为什么我的position：sticky在iOS上不起作用？

我正在编码位于移动屏幕底部的粘性通知栏。我希望将条形图停留在用户屏幕的底部，直到用户到达代码中条形图实际所在位置的滚动位置为止（该位置恰好在页面页脚之前）。我已经从此页面复制了“医生”示例：https : //alligator.io/css/position-sticky/ 我的问题是：在页面上，使用Android设备或通过调整台式机上的浏览器宽度来模拟移动设备时，该栏都可以正常工作。但是，在iOS上，该条不是粘性的，即，它只是位于其位置，直到到达它才粘在屏幕底部。这适用于Safari和Google Chrome。奇怪的是：在前面提到的alligator.io页面上，它在我的iOS设备上运行正常。

我怀疑这是某种Webkit问题，与工具栏周围的代码有关，但是我无法隔离它。我尝试通过尽可能地将代码调整到alligator.io中的示例来调试，但是我无法使其正常工作。我也尝试过在父元素中寻找任何溢出：自动-没有成功。我已经尝试解决了几个小时，对此问题感到厌倦，可以用另一双眼睛帮助我找到我所忽略的东西。

<a href="#" class="jobAlertToggle">
    <div id="jobalarm_mobile">
        <i class="fa fa-bell"></i>
        <span>Jobalarm aktivieren</span>
        <label class="switch">
            <input type="checkbox">
            <span class="slider round"></span>
        </label>
    </div>
</a>

#jobalarm_mobile {
    display: table;
    font-size: 18px;
    width: 100%;
    height: 40px;
    background: #ff8400;
    color: white;
    font-weight: 400;
    text-align: center;
    position: -webkit-sticky;
    position: sticky;
    bottom: -50px;
    align-self: flex-end;
}

Run Code Online (Sandbox Code Playgroud)

您可以访问我正在处理的实时页面（应客户要求隐藏，请私下与我联系）。只需开始任何（建议的）搜索，该栏就会弹出（或者，如果您使用的是iOS，则不会弹出...）。预先感谢您的帮助。

css webkit sticky css3 ios

c42*_*c42

2019 04-25

10
推荐指数

2
解决办法

6476
查看次数

使div粘滞，使其随页面滚动

我已经搜索了一段时间，并尝试了一些方法，但是无法使#topDiv我的代码随页面滚动。我尝试将位置设置为，position: sticky但这还没有完成。

这是我的代码：

body {
  background-size: cover;
  width: 100%;
  height: 100%;
  overflow: auto;
  overflow-x: hidden;
}

#topDiv {
  height: 50%;
  width: 100%;
  background: url(https://placehold.it/1000x200);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: sticky;
}

#bottomDiv {
  min-height: 50%;
}

Run Code Online (Sandbox Code Playgroud)

<body id="background" onresize="VerticalAlign();">
  <div id="topDiv">
    <img id="icon">
  </div>
  <div id="bottomDiv">
    <div id="textBox">
      <h1 id="header" class="check-element">Header</h1>
      <h2 id="subheader1" class="moveSub1 check-element">Subheader</h2>
      <p id="text1" class="movePara1 check-element">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec leo quam. Proin vulputate convallis augue …

Run Code Online (Sandbox Code Playgroud)

html css html5 css3

Edd*_*die

2019 02-27

5
推荐指数

1
解决办法

106
查看次数

在 IE 和页脚顶部制作一个 div 粘性

我想让一个 div 粘在滚动上，但是当它总是停留在页脚的顶部时。

我尝试使用position:stickywhich 工作正常，但它在 IE11 上不起作用。

我也为类似的问题尝试了多种解决方案，但他们总是提到如何使页脚具有粘性，而不是<div>在 main <div>.

这是我的代码的样子：

.slider {
  background: #006264;
  color: white;
  position: sticky;
  bottom: 0px;
  width: 100%;
  height: 60px;
}

.footer {
  background: #04246A;
  color: white;
  font-weight: bold;
  margin: 0 auto;
  height: 119px;
}

Run Code Online (Sandbox Code Playgroud)

<div class="main">
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="placeholder">This div holds place</div>
  <div class="slider">
    This is the footer
  </div>
</div> …

Run Code Online (Sandbox Code Playgroud)

html css sticky internet-explorer-11

Ich*_*aki

2020 10-27

5
推荐指数

0
解决办法

467
查看次数

如果后跟位置绝对元素，为什么位置粘性不起作用？

下面是代码片段，如果运行它，您可以看到标题元素没有粘贴。我查看了以下问题。 “位置：粘性；” 不工作的 CSS 和 HTML 和CSS：“位置：粘性” 在许多其他人中定义了“高度”时不起作用，但它没有帮助..

这是我的代码。

<body style="margin: 0">
  <div id="header" style="height: 50px;width: 100%;position: sticky;top: 0px;background-color: rgb(33, 150, 243);">
    <div>header contents</div>
    <div>header contents</div>
  </div>
  <div id="container" style="position: absolute; top: 50px; left: 0px; width: 100%; background: #ddd;">
    <div style="height: 1000px;">
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
      <div>some contents</div>
      <br>
    </div>
  </div>
</body>

Run Code Online (Sandbox Code Playgroud)

我还注意到，如果我从容器 div 中删除 position: absolute ，粘性开始正常工作。任何帮助将不胜感激。

css css-position sticky

Aja*_*yal

2019 04-12

1
推荐指数

1
解决办法

3411
查看次数