Javascript-форум - Показать сообщение отдельно - Плавающий блок, замирающий над определенным элементом. Как поправить?

ozoro · #1 (**permalink**) 30.01.2020, 23:18

Есть плавающий блок, который прижат к низу окна браузера

<div class="sidebar">Контент плавающего блока</div>

А это блок (назовем его "Место плавающего блока"), над которым при прокрутке вниз должен замирать плавающий блок и оставаться там при прокрутке дальше вниз

<div class="blockPlace"></div>

Если находимся по контенту выше "Места плавающего блока", то при перезагрузке страницы все верно работает, но когда находимся ниже, то при перезагрузке страницы блок сразу прижимается к низу окна браузера и возвращается на "Место плавающего блока" только если начать скролить. Напимер, в Firefox это происходит не всегда, примерно каждую пятую перезагрузку, в других браузерах как придется, в IE появляется на секунду внизу и возвращается на свое место. В общем как-то все это не то...

Помогите поправить код таким образом, если находимся ниже "Места плавающего блока", то при перезагрузке страницы блок не прижимался к низу окна, а ЖЕСТКО был на "своем месте, БЕЗ ДЕРГАНИЙ.
Соответственно, если прокрутить вверх, блок откреплялся и при прокрутке вверх оставался прижатым к низу окна.

Код на js, но можно переделать на Jquery, даже предпочтительнее на Jquery с условием поддержки до IE9 включительно.

Заранее, благодарю!

<!DOCTYPE html>
<html>
    <head>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Плавающий блок, замирающий над определенным элементом</title>
  
  <style>  
  body{padding:0px;margin:0px}  
    
  .sidebar{
    width:100%;    
    bottom: 10px;
    height:50px;
    padding:13px;
    font-size:14px;
    font-style:  italic;
    font-family: 'Arial';
    border: 2px solid #bab89a;
    position: fixed;
    background-color: #00FF7F;
	text-align:center;
   }
	.sidebar .content .text{
		position: absolute;
   }

  .footer{background:#F00;text-align:center;height:270px}
  </style>
<script>
 function offset(a) {
     for (var b = 0; a;) b += parseInt(a.offsetTop), a = a.offsetParent;
     return b
 }
 var s = !0;
 window.onload = function () {
     var a = document.querySelector(".sidebar"),
         b = offset(a),
         f = window.getComputedStyle ? getComputedStyle(a, "") : a.currentStyle,
         d = a.offsetHeight + parseInt(f.marginTop) || 0,
         e = offset(document.querySelector(".blockPlace"));
     window.onscroll = function () {
         var c = window.pageYOffset || document.documentElement.scrollTop,
             c = e - (c + d + b);
         s != 0 < c && ((s = 0 < c) ? (a.style.top = b + "px", a.style.position = "fixed") : (a.style.top = e - d + "px", a.style.position = "absolute"))
     }
 };
</script>
</head>
<body>


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

<br>
<br>
<br>
<br>
<br>

<div class="sidebar">Контент плавающего блока</div>
<div class="blockPlace"></div>


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


<div class="footer">
  <p>Copyright (c) 2020</p>
</div>
</body>
</html>