Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Плавающий блок, замирающий над определенным элементом. Как поправить? (https://javascript.ru/forum/jquery/79385-plavayushhijj-blok-zamirayushhijj-nad-opredelennym-ehlementom-kak-popravit.html)

ozoro 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>

Malleys 31.01.2020 05:59
Цитата:
Сообщение от ozoro
Если находимся по контенту выше "Места плавающего блока", то при перезагрузке страницы все верно работает, но когда находимся ниже, то при перезагрузке страницы блок сразу прижимается к низу окна браузера и возвращается на "Место плавающего блока" только если начать скролить. Напимер, в Firefox это происходит не всегда, примерно каждую пятую перезагрузку, в других браузерах как придется, в IE появляется на секунду внизу и возвращается на свое место. В общем как-то все это не то...
Для этого есть position: sticky; Вам даже не нужен дополнительный элемент, чтобы указать, где должен останавливаться сам плавающий элемент, поскольку он так и так находится там, где он должен останавливаться.

Вот, идеальное позиционирование...
<!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; не работает и использовать в старом браузере свой дёргающийся скрипт.

ozoro 31.01.2020 11:55
Цитата:
Сообщение от Malleys (Сообщение 519495)
Да, position: sticky; не работает в IE9, но что вам мешает обновить браузер до последней версии (Edge 79). Или если вам так нужна поддержка IE9, то вы можете проверить, что position: sticky; не работает и использовать в старом браузере свой дёргающийся скрипт.
Похоже в IE вообще не работает, возможно кроме указанной версии, которую пользователь, попавший на сайт, должен будет установить :)

А как проверить, что position: sticky; не работает в браузере? Это уже интереснее...

Malleys 31.01.2020 12:39
Цитата:
Сообщение от ozoro
А как проверить, что 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("Всё хорошо!"); }
})();


Цитата:
Сообщение от ozoro
Похоже в IE вообще не работает, возможно кроме указанной версии, которую пользователь, попавший на сайт, должен будет установить
IE9 — это устаревший браузер, которым мало кто пользуется. Вы можете проверить поддержку и для старого браузера использовать свой скрипт. А в браузерах, которые поддерживают стандарт работает нормальный способ позиционирования. position: sticky работает во всех современных браузерах, которыми обычно пользуются люди! https://caniuse.com/#feat=mdn-css_pr...osition_sticky

ozoro 02.02.2020 00:27
Malleys,
Благодарю! делал с position: sticky.
Решил забить на IE, пусть блок будет в IE на своем месте, а то поведение плавающего блока в IE непредсказуемо, тем более это кнопки соц сетей. Так что в ie после статьи им самое место:)


Часовой пояс GMT +3, время: 02:38.