Question

我在容器内有一个粘滞按钮，然后我有另一个全角元素（容器流体），但似乎该粘滞仅在其内部起作用，以任何方式使其整体化？

我尝试使用固定而不是粘性的，但是我需要粘性提供的行为，并且我需要在容器之间具有容器流体的网站结构

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

  <div class="container" style="background-color: green;">
    <div class "row">
      <div class="col-12">
        Lorem ipsum dolor sit amet consectetur adipiscing elit nibh convallis pharetra et fames orci, vestibulum dictum bibendum justo neque metus sem vivamus gravida cursus libero vehicula. Hendrerit ut per risus ac
      </div>
    </div>
    <div class="row sticky-top">
      <div class="col-12">
        <button class="btn btn-primary">Sticky</button>
      </div>
    </div>
    <div class="row">
      <div class="col-12">
        Lorem ipsum dolor sit amet consectetur adipiscing elit nibh convallis pharetra et fames orci, vestibulum dictum bibendum justo neque metus sem vivamus gravida cursus libero vehicula. Hendrerit ut per risus accumsan lacus fames himenaeos ornare turpis
        sociosqu lobortis nibh metus, interdum magna euismod odio massa tempor inceptos penatibus mollis dapibus sollicitudin. Condimentum torquent pulvinar ut semper sollicitudin imperdiet lacus quisque nunc, ante varius volutpat porttitor proin dapibus
        habitasse ornare penatibus mus, dictum habitant primis sagittis pellentesque facilisi litora fames. Non egestas vel convallis torquent leo nec nisi a, malesuada ultrices dapibus ornare mauris tortor iaculis cum commodo, facilisi fames parturient
        varius ultricies lectus taciti. Mollis vestibulum platea cum nibh aliquam ligula habitasse elementum, sociis metus litora porttitor maecenas semper quam, rutrum nam eu dapibus congue sed venenatis. Fusce senectus nascetur pulvinar ac volutpat
        mollis commodo netus arcu nisl odio ante vehicula, primis a cras aenean sagittis viverra praesent ultricies convallis per sollicitudin ultrices. Sociis auctor velit et felis a tellus dis nisi, rhoncus aliquam dui mauris sem montes mi, fermentum
        per torquent ridiculus quam justo maecenas. Placerat fusce consequat vestibulum in netus nisl condimentum curabitur suspendisse, posuere arcu volutpat ante taciti eleifend senectus tristique nunc, etiam sociosqu integer cursus nisi pharetra facilisi
        penatibus. Aliquet ad leo tincidunt ridiculus praesent mollis et faucibus, malesuada cursus conubia purus placerat condimentum felis. Massa egestas dui habitasse etiam ullamcorper eget rhoncus, ut ultrices taciti metus dis cum, eu porttitor commodo
        aliquam dictumst suscipit. Eu ultrices id varius congue mauris posuere sollicitudin lobortis convallis pellentesque praesent, sociis blandit ligula rhoncus parturient eget primis a volutpat mi, magna pulvinar molestie duis sagittis condimentum
        mus imperdiet diam et.
      </div>
    </div>
  </div>

  <div class="container-fluid" style="background-color: yellow;">
    <div class="row">
      <div class="col-12">
        Lorem ipsum dolor sit amet consectetur adipiscing elit nibh convallis pharetra et fames orci, vestibulum dictum bibendum justo neque metus sem vivamus gravida cursus libero vehicula. Hendrerit ut per risus accumsan lacus fames himenaeos ornare turpis
        sociosqu lobortis nibh metus, interdum magna euismod odio massa tempor inceptos penatibus mollis dapibus sollicitudin. Condimentum torquent pulvinar ut semper sollicitudin imperdiet lacus quisque nunc, ante varius volutpat porttitor proin dapibus
        habitasse ornare penatibus mus, dictum habitant primis sagittis pellentesque facilisi litora fames. Non egestas vel convallis torquent leo nec nisi a, malesuada ultrices dapibus ornare mauris tortor iaculis cum commodo, facilisi fames parturient
        varius ultricies lectus taciti.
      </div>
    </div>
  </div>

  <div class="container" style="background-color: green;">
    <div class="row">
      <div class="col-12">
        Lorem ipsum dolor sit amet consectetur adipiscing elit nibh convallis pharetra et fames orci, vestibulum dictum bibendum justo neque metus sem vivamus gravida cursus libero vehicula. Hendrerit ut per risus accumsan lacus fames himenaeos ornare turpis
        sociosqu lobortis nibh metus, interdum magna euismod odio massa tempor inceptos penatibus mollis dapibus sollicitudin. Condimentum torquent pulvinar ut semper sollicitudin imperdiet lacus quisque nunc, ante varius volutpat porttitor proin dapibus
        habitasse ornare penatibus mus, dictum habitant primis sagittis pellentesque facilisi litora fames. Non egestas vel convallis torquent leo nec nisi a, malesuada ultrices dapibus ornare mauris tortor iaculis cum commodo, facilisi fames parturient
        varius ultricies lectus taciti. Mollis vestibulum platea cum nibh aliquam ligula habitasse elementum, sociis metus litora porttitor maecenas semper quam, rutrum nam eu dapibus congue sed venenatis. Fusce senectus nascetur pulvinar ac volutpat
        mollis commodo netus arcu nisl odio ante vehicula, primis a cras aenean sagittis viverra praesent ultricies convallis per sollicitudin ultrices. Sociis auctor velit et felis a tellus dis nisi, rhoncus aliquam dui mauris sem montes mi, fermentum
        per torquent ridiculus quam justo maecenas. Placerat fusce consequat vestibulum in netus nisl condimentum curabitur suspendisse, posuere arcu volutpat ante taciti eleifend senectus tristique nunc, etiam sociosqu integer cursus nisi pharetra facilisi
        penatibus. Aliquet ad leo tincidunt ridiculus praesent mollis et faucibus, malesuada cursus conubia purus placerat condimentum felis. Massa egestas dui habitasse etiam ullamcorper eget rhoncus, ut ultrices taciti metus dis cum, eu porttitor commodo
        aliquam dictumst suscipit. Eu ultrices id varius congue mauris posuere sollicitudin lobortis convallis pellentesque praesent, sociis blandit ligula rhoncus parturient eget primis a volutpat mi, magna pulvinar molestie duis sagittis condimentum
        mus imperdiet diam et.
      </div>
    </div>
  </div>
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

</body>

</html>
@endsection

Answer 1

如果您想使用Javascript，应该是

let stick = document.querySelector(".sticky-top");
let fluit = document.querySelector(".container-fluid");

window.addEventListener("scroll", function(){
let fluitB = fluit.getBoundingClientRect();
let stickH = stick.getBoundingClientRect().height;

if(fluitB.y <= stickH) {

stick.style.position = "fixed";

} else {
stick.style.position = "sticky";
}

});

Answer 2

尝试在button上使用下面的属性，而不要在row上使用，并记住不要试图在此处覆盖任何框架的默认类，因为您会看到您试图赋予sticky的位置到row中的bootstrap，这是一种不好的方法。

.btn.btn-primary{
    position: fixed;
    top: 0;
    z-index: 1020;
}

和第二个问题是不可能的，因为container fluid和container是引导框架中使用的两个主要父类，在其中您的结构像row col div存在。尽管您可以通过自定义class并使用它来实现。

如何保持元素在容器之间的黏性？

2 个答案: