Плавающий блок, замирающий над определенным элементом. Как поправить?
Есть плавающий блок, который прижат к низу окна браузера
<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> |
Цитата:
Вот, идеальное позиционирование... <!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> html, body { margin: 0; } .sidebar { position: -webkit-sticky; position: sticky; bottom: 10px; height: 50px; padding: 1em; font-family: Arial, Helvetica, sans-serif; border: 2px solid #bab89a; background: #cfc; text-align: center; } .footer { background: #fcc; text-align: center; height: 270px; } </style> </head> <body> <script> for (let index = 1; index <= 100; index++) { document.write("<p>Строка " + index + "</p>"); } </script> <div class="sidebar">Контент плавающего блока</div> <script> for (let index = 1; index <= 100; index++) { document.write("<p>Строка " + index + "</p>"); } </script> <div class="footer"> <p>Copyright © 2020</p> </div> </body> </html> Да, position: sticky; не работает в IE9, но что вам мешает обновить браузер до последней версии (Edge 79). Или если вам так нужна поддержка IE9, то вы можете проверить, что position: sticky; не работает и использовать в старом браузере свой дёргающийся скрипт. |
Цитата:
А как проверить, что position: sticky; не работает в браузере? Это уже интереснее... |
Цитата:
(function() { var isSupported = false; try { var p = document.createElement("p"); p.style.position = "sticky"; if(p.style.position === "sticky") isSupported = true; p.style.position = "-webkit-sticky"; if(p.style.position === "-webkit-sticky") isSupported = true; } catch(error) {} if(!isSupported) { alert("Не поддерживается, пиши сюда свой дёргающийся способ"); } else { alert("Всё хорошо!"); } })(); Цитата:
|
Malleys,
Благодарю! делал с position: sticky. Решил забить на IE, пусть блок будет в IE на своем месте, а то поведение плавающего блока в IE непредсказуемо, тем более это кнопки соц сетей. Так что в ie после статьи им самое место:) |
Часовой пояс GMT +3, время: 03:32. |