Saya memiliki tombol lengket di dalam wadah, lalu saya memiliki elemen lain dengan lebar penuh (cairan wadah) tetapi sepertinya lengket hanya berfungsi di dalamnya, adakah cara untuk menjadikannya global?

Saya telah mencoba dengan tetap alih-alih lengket tetapi saya membutuhkan perilaku yang diberikan lengket, dan saya juga membutuhkan struktur situs web itu dengan wadah-cairan di antara wadah

<!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
0
Cristian 25 Oktober 2019, 16:24

2 jawaban

Jawaban Terbaik

Coba gunakan properti di bawah ini pada button daripada row dan ingat jangan mencoba untuk menimpa kelas default kerangka kerja apa pun di sini karena Anda melihat Anda mencoba memberikan posisi sticky ke row dari bootstrap yang merupakan pendekatan yang buruk.

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

Dan pertanyaan kedua itu tidak mungkin karena container fluid dan container adalah dua kelas induk utama yang digunakan dalam kerangka bootstrap di mana struktur Anda seperti row col div ada. meskipun Anda dapat mencapai ini dengan membuat class kustom Anda dan menggunakannya.

1
Awais 28 Oktober 2019, 05:46

Jika Anda ingin menggunakan Javascript, ini harus,

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";
}

});
1
dnaz 25 Oktober 2019, 14:12