All geek questions in one place

Bootstrap affix how to set it to parent element

I want to use the bootstrap assembler in the same way as "How to format" on the right side of the Ask a question on the stack page .

I can make it attached to the viewport by adding css .affix { top: 70px }and using class='affix' data-spy='affix'in html, but what if I want the affix element to be attached to the parent element?

For example, if I have such html:

<div class='affix-container'>
  <div class='left-panel'>
    some form, including a textarea
  </div>
  <div class='right-panel affix' data-spy='affix'>
    how to format
  </div>
</div>

I would like it to right-panelbe attached only relatively affix-container, so when I scroll down, if affix-containerit is still in the viewport, then add right-panel, otherwise let it right-panelscroll up.

Can I do this if the affix container is changed? i.e. Does its size / height increase with resizing of the text area contained in it?

+4
source share
1 answer

If you want to track the scroll movement in the left pane, you need to use a scroll scroll with an affix. First you need to set up the body tag.

<body data-spy="scroll" data-target="#myScrollspy" data-offset="200">

Here the offset ensures that tracking starts only with 200 from the top, depending on the size of the header, etc. Then the right pane gets id = "myScrollspy", for example.

<div class="hidden-xs col-sm-2" id="myScrollspy">
    <div class="right-panel affix" data-spy="affix" data-offset-top="400">
    </div>
</div>

400 (, ..). css . , / i.e. xs. scrollspy, 2 .

.affix {
   top: 100px;
 }

, .

0

Source: https://habr.com/ru/post/1651227/

More articles:


All Articles