Как сохранить элемент липким между контейнерами? - PullRequest
Новая
       0

Как сохранить элемент липким между контейнерами?

0 голосов
/ 25 октября 2019

У меня есть липкая кнопка внутри контейнера, затем у меня есть другой элемент полной ширины (контейнер-жидкость), но кажется, что липкая работает только внутри него, в любом случае, чтобы сделать его глобальным?

У меня естьпробовал с фиксированным вместо липкого, но мне нужно поведение, которое дает липкий, а также мне нужна структура сайта с контейнером-флюидом между контейнерами 

<!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

Ответы [ 2 ]

1 голос
/ 28 октября 2019

Попробуйте использовать нижеприведенные свойства для button, а не row, и помните, что не пытайтесь переопределить классы по умолчанию для любой структуры здесь, поскольку вы видите, что пытаетесь присвоить sticky позицию rowbootstrap который плохой подход . 

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

и второй вопрос, это невозможно, потому что container fluid и container являются двумя основными родительскими классами, используемыми в рамках начальной загрузки, внутри которых ваша структуравроде row col div существует. хотя вы можете добиться этого, сделав свой собственный class и использовать его.

1 голос
/ 25 октября 2019

Если вы хотите использовать 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";
}

});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...