Question 263202 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – How to scroll a “postion: fixed” div element , only inside a particular div content on a page?

Let’s say I have the following HTML and CSS and jQuery:

$("#blue_square").css("top", $(window).height() / 2 - 80)
.divTwo {
  position: relative;
}

#blue_square {
  position: fixed;
  right: 0;
  z-index: 9;
  width: 370px;
  box-shadow: 0 0 6px transparent;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="divOne"></div>

<div class="divTwo">
  <div class="col-md-12 col-sm-10">
    <div id="blue_square" style="top: 310px;">Blue</div>
  </div>
</div>

<div class="divThree"></div>

The problem I am noticing is that the blue_square div element, is somehow showing up on divOne but I was only expecting it to start from divTwo.

My question is, how do I make blue_square to start inside divtwo and have it contained with in the divtwo while I scroll its content?

I only want to see position blue_square position: fixed element inside divTwo and that’s it. I don’t want to see it on divOne or divThree when I am scrolling their content. How can I achieve this with JavaScript?

Tags:

2

Answers


  1. 0

    Just change the css from fixed to absolute css and it will work according to your requirement:-

    .divTwo {
        position: relative;
        overflow: auto; /* Hide the overflow to prevent scrollbars on .divTwo */
        height: 200px;
        width: 200px;
    }
    #blue_square {
        position: absolute;
        right: 0;
        z-index: 9;
        width: 370px;
        box-shadow: 0 0 6px transparent;
        height: 100%; /* Set the height to 100% to fill .divTwo */
        left: 0;
        word-break: break-word;
    }
    Login or Signup to reply.
  2. 0

    For this specific use case you could use position:sticky but if you want to position it based on the right you will have to use some creative calculation with calc and apply it to the left (since the left/right/top/bottom are offsets from its initial position)

    $("#blue_square").css("top", $(window).height() / 2 - 80)
    body>div[class] {
  max-height: 250px;
  margin: 1em;
  padding: 1em;
  border: 1px solid grey;
  overflow: auto;
}

.divTwo {
  position: relative;
  max-height:150px;
}

#blue_square {
  position: sticky;
  left: calc(100% - 100px);
  z-index: 9;
  width: 100px;
  box-shadow: 0 0 6px #000;
  background: rgba(0,0,0,0.3);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="divOne">
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tempus tellus dui, sed convallis leo molestie sit amet. Morbi tempus commodo turpis. Sed vulputate, magna ut convallis finibus, urna sapien cursus
  mauris, sit amet scelerisque ex diam sagittis turpis. Cras et nunc est. Aenean at metus et magna scelerisque consequat ut id felis. Donec quis diam sit amet justo egestas congue in non ante. Vestibulum gravida bibendum nibh. Suspendisse potenti. Fusce
  sed felis id nunc luctus suscipit. Praesent leo diam, auctor ac posuere eget, efficitur egestas sem. Mauris vel sapien eget justo tempus elementum lobortis lobortis felis. Phasellus eget dolor mauris. Morbi tincidunt pharetra mauris eu convallis. Duis
  nec dolor scelerisque nulla faucibus cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>

<div class="divTwo">
  <div class="col-md-12 col-sm-10">
    <div id="blue_square" style="top: 310px;">Blue</div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu laoreet dui. Vestibulum rhoncus tortor eu metus molestie tristique. Praesent tempus lorem eget dignissim bibendum. Suspendisse lacinia sit amet elit ut eleifend. Sed fringilla dolor
    id interdum varius. Nulla in tortor rutrum, pellentesque nibh a, cursus nulla. Fusce nibh ex, faucibus sit amet imperdiet ut, mattis non augue. Nullam lobortis nunc felis, quis lobortis ante vulputate at. Vivamus ac est quis purus lobortis elementum. Sed fringilla dolor
    id interdum varius. Nulla in tortor rutrum, pellentesque nibh a, cursus nulla. Fusce nibh ex, faucibus sit amet imperdiet ut, mattis non augue. Nullam lobortis nunc felis, quis lobortis ante vulputate at. Vivamus ac est quis purus lobortis elementum.
  </div>

</div>

<div class="divThree">
Suspendisse lacinia sit amet elit ut eleifend. Sed fringilla dolor
  id interdum varius. Nulla in tortor rutrum, pellentesque nibh a, cursus nulla. Fusce nibh ex, faucibus sit amet imperdiet ut, mattis non augue. Nullam lobortis nunc felis, quis lobortis ante vulputate at. Vivamus ac est quis purus lobortis elementum.</div>

    A more robust solution would be to use position:relative on the #blue_square and position:relative on its container, and then use another element for the scrolling content. So it would require some changes to the html/css structure

    (something like the following)

    $("#blue_square").css("top", $(window).height() / 2 - 80)
    .divOne,.divTwo,.divThree {
  height: 200px;
  margin: 1em;
  padding: 1em;
  border: 1px solid grey;
  overflow: auto;
}

.divTwo {
  position: relative;
  overflow:hidden;
}
.scrolling-content{
  height:100%;
  overflow:auto;
}

#blue_square {
  position: absolute;
  right: 0;
  z-index: 9;
  width: 200px;
  box-shadow: 0 0 6px #000;
  background: rgba(0,0,0,0.3);
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<div class="divOne">
  Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque tempus tellus dui, sed convallis leo molestie sit amet. Morbi tempus commodo turpis. Sed vulputate, magna ut convallis finibus, urna sapien cursus
  mauris, sit amet scelerisque ex diam sagittis turpis. Cras et nunc est. Aenean at metus et magna scelerisque consequat ut id felis. Donec quis diam sit amet justo egestas congue in non ante. Vestibulum gravida bibendum nibh. Suspendisse potenti. Fusce
  sed felis id nunc luctus suscipit. Praesent leo diam, auctor ac posuere eget, efficitur egestas sem. Mauris vel sapien eget justo tempus elementum lobortis lobortis felis. Phasellus eget dolor mauris. Morbi tincidunt pharetra mauris eu convallis. Duis
  nec dolor scelerisque nulla faucibus cursus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </div>

<div class="divTwo">
    <div id="blue_square" style="top: 110px;">Blue</div>
  <div class="scrolling-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum eu laoreet dui. Vestibulum rhoncus tortor eu metus molestie tristique. Praesent tempus lorem eget dignissim bibendum. Suspendisse lacinia sit amet elit ut eleifend. Sed fringilla dolor
    id interdum varius. Nulla in tortor rutrum, pellentesque nibh a, cursus nulla. Fusce nibh ex, faucibus sit amet imperdiet ut, mattis non augue. Nullam lobortis nunc felis, quis lobortis ante vulputate at. Vivamus ac est quis purus lobortis elementum. Sed fringilla dolor
    id interdum varius. Nulla in tortor rutrum, pellentesque nibh a, cursus nulla. Fusce nibh ex, faucibus sit amet imperdiet ut, mattis non augue. Nullam lobortis nunc felis, quis lobortis ante vulputate at. Vivamus ac est quis purus lobortis elementum.
  </div>

</div>

<div class="divThree">
Suspendisse lacinia sit amet elit ut eleifend. Sed fringilla dolor
  id interdum varius. Nulla in tortor rutrum, pellentesque nibh a, cursus nulla. Fusce nibh ex, faucibus sit amet imperdiet ut, mattis non augue. Nullam lobortis nunc felis, quis lobortis ante vulputate at. Vivamus ac est quis purus lobortis elementum.</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search