It is necessary to do something that the sidebar would move along with the main part, but when scrolling to the end of the sidebar, it must take a fixed position. When scrolling up, when the sidebar is in a fixed position, the sidebar should move with the main part.

https://jsfiddle.net/z0bjLv32/

<main> <ul> <li> <p>1</p> </li> <li> <p>2</p> </li> <li> <p>3</p> </li> <li> <p>4</p> </li> <li> <p>5</p> </li> <li> <p>6</p> </li> <li> <p>7</p> </li> <li> <p>8</p> </li> <li> <p>9</p> </li> <li> <p>10</p> </li> <li> <p>11</p> </li> <li> <p>12</p> </li> <li> <p>13</p> </li> <li> <p>14</p> </li> <li> <p>15</p> </li> <li> <p>16</p> </li> <li> <p>17</p> </li> <li> <p>18</p> </li> <li> <p>19</p> </li> <li> <p>20</p> </li> <li> <p>21</p> </li> <li> <p>22</p> </li> <li> <p>23</p> </li> <li> <p>24</p> </li> <li> <p>25</p> </li> <li> <p>26</p> </li> <li> <p>27</p> </li> <li> <p>28</p> </li> <li> <p>29</p> </li> <li> <p>30</p> </li> <li> <p>31</p> </li> <li> <p>32</p> </li> <li> <p>33</p> </li> <li> <p>34</p> </li> <li> <p>35</p> </li> <li> <p>36</p> </li> <li> <p>37</p> </li> <li> <p>38</p> </li> <li> <p>39</p> </li> <li> <p>40</p> </li> <li> <p>41</p> </li> <li> <p>42</p> </li> <li> <p>43</p> </li> <li> <p>44</p> </li> <li> <p>45</p> </li> <li> <p>46</p> </li> <li> <p>47</p> </li> <li> <p>48</p> </li> <li> <p>49</p> </li> <li> <p>50</p> </li> <li> <p>51</p> </li> <li> <p>52</p> </li> <li> <p>53</p> </li> <li> <p>54</p> </li> <li> <p>55</p> </li> <li> <p>56</p> </li> <li> <p>57</p> </li> <li> <p>58</p> </li> <li> <p>59</p> </li> <li> <p>60</p> </li> <li> <p>61</p> </li> <li> <p>62</p> </li> <li> <p>63</p> </li> <li> <p>64</p> </li> <li> <p>65</p> </li> <li> <p>66</p> </li> <li> <p>67</p> </li> <li> <p>68</p> </li> <li> <p>69</p> </li> <li> <p>70</p> </li> <li> <p>71</p> </li> <li> <p>72</p> </li> <li> <p>73</p> </li> <li> <p>74</p> </li> <li> <p>75</p> </li> <li> <p>76</p> </li> <li> <p>77</p> </li> <li> <p>78</p> </li> <li> <p>79</p> </li> <li> <p>80</p> </li> <li> <p>81</p> </li> <li> <p>82</p> </li> <li> <p>83</p> </li> <li> <p>84</p> </li> <li> <p>85</p> </li> <li> <p>86</p> </li> <li> <p>87</p> </li> <li> <p>88</p> </li> <li> <p>89</p> </li> <li> <p>90</p> </li> <li> <p>91</p> </li> <li> <p>92</p> </li> <li> <p>93</p> </li> <li> <p>94</p> </li> <li> <p>95</p> </li> <li> <p>96</p> </li> <li> <p>97</p> </li> <li> <p>98</p> </li> <li> <p>99</p> </li> <li> <p>100</p> </li> </ul> </main> <aside> <ul> <li> <p>1</p> </li> <li> <p>2</p> </li> <li> <p>3</p> </li> <li> <p>4</p> </li> <li> <p>5</p> </li> <li> <p>6</p> </li> <li> <p>7</p> </li> <li> <p>8</p> </li> <li> <p>9</p> </li> <li> <p>10</p> </li> <li> <p>11</p> </li> <li> <p>12</p> </li> <li> <p>13</p> </li> <li> <p>14</p> </li> <li> <p>15</p> </li> <li> <p>16</p> </li> <li> <p>17</p> </li> <li> <p>18</p> </li> <li> <p>19</p> </li> <li> <p>20</p> </li> <li> <p>21</p> </li> <li> <p>22</p> </li> <li> <p>23</p> </li> <li> <p>24</p> </li> <li> <p>25</p> </li> <li> <p>26</p> </li> <li> <p>27</p> </li> <li> <p>28</p> </li> <li> <p>29</p> </li> <li> <p>30</p> </li> <li> <p>31</p> </li> <li> <p>32</p> </li> <li> <p>33</p> </li> <li> <p>34</p> </li> <li> <p>35</p> </li> <li> <p>36</p> </li> <li> <p>37</p> </li> <li> <p>38</p> </li> <li> <p>39</p> </li> <li> <p>40</p> </li> <li> <p>41</p> </li> <li> <p>42</p> </li> <li> <p>43</p> </li> <li> <p>44</p> </li> <li> <p>45</p> </li> <li> <p>46</p> </li> <li> <p>47</p> </li> <li> <p>48</p> </li> <li> <p>49</p> </li> <li> <p>50</p> </li> <li> <p>51</p> </li> <li> <p>52</p> </li> <li> <p>53</p> </li> <li> <p>54</p> </li> <li> <p>55</p> </li> <li> <p>56</p> </li> <li> <p>57</p> </li> <li> <p>58</p> </li> <li> <p>59</p> </li> <li> <p>60</p> </li> <li> <p>61</p> </li> <li> <p>62</p> </li> <li> <p>63</p> </li> <li> <p>64</p> </li> <li> <p>65</p> </li> <li> <p>66</p> </li> <li> <p>67</p> </li> <li> <p>68</p> </li> <li> <p>69</p> </li> <li> <p>70</p> </li> </ul> </aside>

2 answers 2

Recently did this

 (function(){ var a = document.querySelector('#aside1'), b = null, K = null, Z = 0, P = 0, N = 0; // если у P ноль заменить на число, то блок будет прилипать до того, как верхний край окна браузера дойдёт до верхнего края элемента, если у N — нижний край дойдёт до нижнего края элемента. Может быть отрицательным числом window.addEventListener('scroll', Ascroll, false); document.body.addEventListener('scroll', Ascroll, false); function Ascroll() { var Ra = a.getBoundingClientRect(), R1bottom = document.querySelector('#article').getBoundingClientRect().bottom; if (Ra.bottom < R1bottom) { if (b == null) { var Sa = getComputedStyle(a, ''), s = ''; for (var i = 0; i < Sa.length; i++) { if (Sa[i].indexOf('overflow') == 0 || Sa[i].indexOf('padding') == 0 || Sa[i].indexOf('border') == 0 || Sa[i].indexOf('outline') == 0 || Sa[i].indexOf('box-shadow') == 0 || Sa[i].indexOf('background') == 0) { s += Sa[i] + ': ' +Sa.getPropertyValue(Sa[i]) + '; ' } } b = document.createElement('div'); b.className = "stop"; b.style.cssText = s + ' box-sizing: border-box; width: ' + a.offsetWidth + 'px;'; a.insertBefore(b, a.firstChild); var l = a.childNodes.length; for (var i = 1; i < l; i++) { b.appendChild(a.childNodes[1]); } a.style.height = b.getBoundingClientRect().height + 'px'; a.style.padding = '0'; a.style.border = '0'; } var Rb = b.getBoundingClientRect(), Rh = Ra.top + Rb.height, W = document.documentElement.clientHeight, R1 = Math.round(Rh - R1bottom), R2 = Math.round(Rh - W); if (Rb.height > W) { if (Ra.top < K) { // скролл вниз if (R2 + N > R1) { // не дойти до низа if (Rb.bottom - W + N <= 0) { // подцепиться b.className = 'sticky'; b.style.top = W - Rb.height - N + 'px'; Z = N + Ra.top + Rb.height - W; } else { b.className = 'stop'; b.style.top = - Z + 'px'; } } else { b.className = 'stop'; b.style.top = - R1 +'px'; Z = R1; } } else { // скролл вверх if (Ra.top - P < 0) { // не дойти до верха if (Rb.top - P >= 0) { // подцепиться b.className = 'sticky'; b.style.top = P + 'px'; Z = Ra.top - P; } else { b.className = 'stop'; b.style.top = - Z + 'px'; } } else { b.className = ''; b.style.top = ''; Z = 0; } } K = Ra.top; } else { if ((Ra.top - P) <= 0) { if ((Ra.top - P) <= R1) { b.className = 'stop'; b.style.top = - R1 +'px'; } else { b.className = 'sticky'; b.style.top = P + 'px'; } } else { b.className = ''; b.style.top = ''; } } window.addEventListener('resize', function() { a.children[0].style.width = getComputedStyle(a, '').width }, false); } } })() 
 #article{ height: 2000px; border: 1px solid black; width: 50%; float: left; } #aside1{ border: 1px solid red; width: 40%; float: left; } .sticky { position: fixed; z-index: 101; } .stop { position: relative; z-index: 101; } 
 <header></header> <main> <article id="article"></article> <aside id="aside1"> Lorem Ipsum - це текст-"риба", що використовується в друкарстві та дизайні. Lorem Ipsum є, фактично, стандартною "рибою" аж з XVI сторіччя, коли невідомий друкар взяв шрифтову гранку та склав на ній підбірку зразків шрифтів. "Риба" не тільки успішно пережила п'ять століть, але й прижилася в електронному верстуванні, залишаючись по суті незмінною. Вона популяризувалась в 60-их роках минулого сторіччя завдяки виданню зразків шрифтів Letraset, які містили уривки з Lorem Ipsum, і вдруге - нещодавно завдяки програмам комп'ютерного верстування на кшталт Aldus Pagemaker, які використовували різні версії Lorem Ipsum. </aside> </main> <footer></footer>

Source: http://shpargalkablog.ru/2013/09/scroll-block.html

    You can try using sticky-kit