CODEWITHSUNDEEP
htmlcsstwitter-bootstrapbootstrap-modal
rockarou
rockarou

Reputation: 284

Fixed sidebar inside a bootstrap modal

I want to have a sidebar that sticks to the top when main content is being scrolled down. I've tried position: fixed but as I understand it doesn't work, because main body of a page is not being scrolled. I've also tried fiddling with overflow-y, but didn't have any luck either.
The left side is a long image showcasing my work, and the right side is a box with description of the image.
Here is simple jsbin example: jsbin

Upvotes: 0

Views: 2816

Answers (1)

Sam Ryan
Sam Ryan

Reputation: 7

So first off, I'd suggest updating your bootstrap version then using bootstrap to create said cols. So for instance your code would read

<div class="bs-example">
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
          <div class="containter">
            <div class="row">
              <div class="col-12 col-md-8 order-2 order-md-1 modal-left">long img here</div>
              <div class="col-12 col-md-4 order-1 order-md-2 modal-right">this one should stick to the top while scrolling</div>
            </div>
          </div>
        </div>
    </div>
</div>

What this does is create a resposive version of what you have there. Once you have done this you can implement this code and edit as needed.

        function sticky_relocate_modal() {
        var window_top = $(window).scrollTop();
        var div_top = $('.modal-content').offset().top;
        if (window_top > div_top) {
            $('.modal-right').addClass('modal-stick');
        } else {
            $('.modal-right').removeClass('modal-stick');
        }
    }

    $(function () {
        if ($(window).width() >= 992) {
            $(window).scroll(sticky_relocate_modal);
            sticky_relocate_modal();
        } else {}
    });

What this does is check the container ('.modal-content') and check if it has been scrolled. Once scrolled you can add the class '.modal-stick' This class will have : 

.modal-stick {
position:fixed;
right:0;
}

It's a long way round what you want but creates a much nices code structure and makes you able to use bootstrap to its full potencial. See this documentation for an explanation of bootstrap.

Hope this helps. If you need any more guidance let me know and I'm more than happy to help.

Upvotes: 1

Related Questions