欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

滾動(dòng)分區(qū)內(nèi)的固定位置

CSS

我有一個(gè)高度為400像素的div。內(nèi)容要長(zhǎng)得多，所以div可以滾動(dòng)(y軸)。在div的右側(cè)，我需要一些按鈕在div中有一個(gè)固定的位置。

我該怎么做？jQuery，CSS，隨便什么——我都不介意。

我嘗試了fixTo——但似乎對(duì)此不起作用——還有一個(gè)CSS解決方案說(shuō)“使用位置:固定，但沒(méi)有左/右——只有邊距”。它工作正常，但是如果頁(yè)面本身滾動(dòng)，按鈕也會(huì)滾動(dòng)——這是不應(yīng)該的。它們應(yīng)該一直固定在div中。

示例代碼:

<div class="container" style="width: 960px; height: 400px; position: relative;">
    <div class="buttons needToBeFixed"></div>
    <div class="aLotOfContent" style="width: 2000px;"></div>
</div>

您需要將按鈕作為position: absolute放在容器內(nèi)部。

沙錐蟲(chóng):

.container {
    width: 250px;
    outline: 1px solid blue;
    width: 300px; 
    height: 150px; 
    position: relative;
}

.container .aLotOfContent {
    width: 300px;
    height: 150px;
    overflow: auto;
    background: #e3ecfc;
}

.container .fixed{
    width: 60px;
    height: 40px;
    background-color: #e52727;
    color: white;
    position: absolute;
    right: 40px;
    bottom: 20px;
}

html, body{
    height: 400px;
}

<div class="container">

 <button class="fixed"> im fixed! </button>

 <div class="aLotOfContent">
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
   alotOfContent<br>alotOfContent<br>alotOfContent<br>alotOfContent<br>
 </div>
    
</div>

您可以修改您的HTML標(biāo)記，并使用具有相對(duì)位置的包裝元素。然后，您可以使用position: absolute相對(duì)于該父元素定位元素；。

body {
  width: 1500px;
  height: 1500px;
}
#wrapper {
  position: relative;
  width: 350px;
  overflow: hidden;
}
#container {
  height: 350px;
  overflow-y: scroll;
  border: solid #000 1px;
}
.sticky {
  position: absolute;
}
.right {
  right: 0;
}
.bottom {
  bottom: 0;
}

<div id="wrapper">
  <input type="button" value="Sticky button" class="sticky top" />
  <input type="button" value="Sticky button" class="sticky bottom left" />
  <input type="button" value="Sticky button" class="sticky right" />
  <input type="button" value="Sticky button" class="sticky bottom right" />
  <div id="container">
    <div class="content">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      <br />Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
      It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
      desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
  </div>
</div>

您可以在div外部的固定位置添加對(duì)象，這取決于div內(nèi)部的內(nèi)容。如果您的div依賴于其中的數(shù)據(jù)，一些javascript可以在執(zhí)行依賴于整體的所需操作之前聚合內(nèi)容。

我把按鈕放在下面，然后使用margin-top:-400 px；

<div style="position: relative">
    <div class="container" style="height: 400px;"></div>
    <div class="buttons" style="margin-top: -400px; position: absolute; right: 0;"></div>
</div>

似乎很管用。如果有人有更好的解決方案，他們當(dāng)然歡迎。感謝各位的回答。

您可以通過(guò)兩種方式解決您的問(wèn)題。

純HTML/CSS

<div class="container relparentwrap" style="width: 960px; height: 400px;">
        <div style="height:100%; width:100%;  position: relative; overflow:auto;">
        <div class="aLotOfContent" style="width: 100%; background:red;padding:20px 0;">
            <div style="height:400px; background:green"></div>
            <div style="height:500px; background:yellow"></div>
            <div style="height:500px; background:purple"></div>
        </div>
        </div>
        <div class="buttons needToBeFixed" style="border:solid 1px #fff;margin-top: -20px;position: relative;z-index: 1;">Helllo</div>
</div>

因?yàn)閚eedToBeFixed超出了您的滾動(dòng)區(qū)域。它將永遠(yuǎn)停留在你的div的末尾。

jQuery解決方案 正如你提到的，使用jQuery沒(méi)有問(wèn)題，下面是你的代碼片段。 jsdild鏈接

<!DOCTYPE html>
<html>
<head>
    <title>Fixed position inside scrolling div</title>  
</head>
<body style="margin:0;">
    <div class="container relparentwrap" style="width: 960px; height: 400px; position: relative; overflow:auto;">
        <div class="aLotOfContent" style="width: 100%; background:red;padding:20px 0;">
            <div style="height:400px; background:green"></div>
            <div style="height:500px; background:yellow"></div>
            <div style="height:500px; background:purple"></div>
        </div>
        <div class="buttons needToBeFixed" style="position:absolute; left:0; right:0; border:solid 1px #fff;">Helllo</div>
    </div>
    <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
    <script>
    $(function() {
        var p = $(".relparentwrap").offset();
        var tPos = (p.top + $(".relparentwrap").outerHeight()) - $(".needToBeFixed").outerHeight();
        vPos=tPos;
        $(".needToBeFixed").css("top",tPos);
        $(".relparentwrap").scroll(function() {
            tPos = vPos + $(".relparentwrap").scrollTop();
            console.log(tPos);
            $(".needToBeFixed").css("top",tPos);
        });

    });
    </script>
</body>
</html>