3

Hello. I know there are a lot of questions about sticking a div to top or bottom when scrolling, but my problem is more specific.

The problem is that I want the div to stick to the top or the bottom, depending on how the user scrolls.

I made this jsFiddle snippet to show how the content is set up: https://jsfiddle.net/DTcHh/6155/.

The result I want is: whenever the user is scrolling, the content on the side should also scroll at the same time with the other content. If the content on the side reached the end (top or bottom), then it should stick to the top or bottom (depending on where the end of the content is reached)

For example, in the snippet I provided, I want the content on the side to scroll until the "Fixed content Last." is visible, then stick to the bottom as the user scrolls down. Now, if the user scrolls up, I want the side content to also scroll up until "Fixed content First." is visible, then stick to the top.

Html of the side contnet:

<nav >
      <div id="filterAnchor"></div>
      <div id="filterScroll" class="fixed_div">
          Fixed content First.</br>
          Fixed content.</br>
          Fixed content.</br>
          ...
          [more "Fixed content."]
          ...
          Fixed content.</br>
          Fixed content.</br>
          Fixed content Last.</br>
      </div>
</nav>
Siguza
  • 21,155
  • 6
  • 52
  • 89
Shikkou
  • 545
  • 7
  • 22

1 Answers1

4

In the first place you need to know the scroll direction. And if I'm right you want the sticky side bar to scroll with the content but never out of sight.

I've edited the fiddle to do this.

It should need some optimization but I hope you get the idea. The tricky part is to check if the bottom is reached and I'm still not sure if this is the right way:

if ($window.height() <= $filterClass.height() + top) {
    $filterClass.addClass('stick-bottom');
    $filterClass.css('top', '');
}

Edit (see comments for more context):

With this updated fiddle I added support for different situations:

1. When the side content is longer than main content:
The default position is absolute. No javascript is needed for this to work properly.

2. When the side content is longer than the window height:
The position is set to fixed. When scrolling down (content moves up) the side sticks to the bottom when reached:

// top means position top of the fixed side
if(top < 0 && fixedHeight + top < windowHeight) {
    $filterClass.addClass('stick-bottom');
    $filterClass.css('top', '');
} else {
    $filterClass.css('top', top+diff);
}

3. When the side content is shorter than the window height:
The position is set to fixed. Situation as in original answer above.

jazZRo
  • 1,598
  • 1
  • 14
  • 18
  • 1
    This doesn't completely solve my problem, because the content in the middle isn't shown, but it's a start. Thank you. – Shikkou Apr 06 '15 at 12:43
  • Can you clarify what you mean with content in the middle? In the fiddle all content is shown. – jazZRo Apr 06 '15 at 13:30
  • Well, I've also updated [your fiddle](https://jsfiddle.net/DTcHh/6815/), and added a few mode lines to the HTML. There are also lines called " Fixed content Middle." and now they do not show up. – Shikkou Apr 19 '15 at 20:37
  • The side content jumps to top or bottom when it is longer than the height of the viewport, I understand this is unwanted behavior. When I have time I will look into this. If you resize the viewport/frame you’ll see that the middle content isn’t exactly hidden. – jazZRo Apr 20 '15 at 08:30
  • I have [updated the fiddle](https://jsfiddle.net/DTcHh/6828/) to allow scrolling on the side and main content when the side is longer than the viewport. Is this the required behavior? If so than I’ll add this with an explanation to the answer. – jazZRo Apr 20 '15 at 08:56
  • I managed to resolve half of the problem. The (partial) wanted behavior is [this](https://jsfiddle.net/DTcHh/6846/). Now the problem is that when I scroll up, I want the div to remember the last bottom position. And then when I hit the top, do the same thing. – Shikkou Apr 20 '15 at 11:58
  • I couldn't see the direction you were going with the last fiddle so I used the previous one. It's still not perfect and I'm still not sure if this is going the direction you want it. You can check it [here](https://jsfiddle.net/DTcHh/6895/) – jazZRo Apr 21 '15 at 08:18
  • That wasn't the right fiddle. [This one](https://jsfiddle.net/DTcHh/6897/) is better. – jazZRo Apr 21 '15 at 08:24
  • That is exactly what I wanted. It still has a little bug on scroll down where it sometimes snaps to bottom. But thank you. If you'll edit the answer I'll vote it up and accept it. – Shikkou Apr 21 '15 at 12:11
  • @AlexuGoku I added some explanation to the answer. I've also managed to fix the bug and updated the fiddle for that. – jazZRo Apr 21 '15 at 13:20